Pin menu to the top of the page when scrolling down

Question

Pin menu to the top of the page when scrolling down

Navigation

#1 by (2 votes)

3

I have a div with height 100% and then a navbar . I would like that when the page was down the navbar would stick to the top of the page.

CSS

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #27ae60;
    text-align:center;
    z-index: 99;
    position: relative;
}
ul.navbar li {
    display: inline;
}
ul.navbar li:not(:nth-last-child(2)) {
    border-right: 1px solid #079342;
}
ul.navbar li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    font-size: 100%;
    text-transform: uppercase;
    font-weight: 300;
}
ul.navbar li a:hover { 
    color: #e6e6e6 !important;
}
ul.navbar li.navbar-icon {display: none;}
@media screen and (max-width:680px) {
  ul.navbar{text-align:left;}
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.navbar-icon {
    float: right;
    padding-bottom: -5px;
    display: inline-block;
  }
  ul.navbar li.navbar-icon a {
    padding-bottom: 17px;
  }
}
@media screen and (max-width:680px) {
    ul.navbar.navbar-responsive {
        position: relative;
    }
    ul.navbar.navbar-responsive li.navbar-icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.navbar.navbar-responsive li {
        float: none;
        display: inline;
    }
    ul.navbar.navbar-responsive li a {
        display: block;
        text-align: left;
    }
    ul.navbar li:first-child {
        border-right: none;
    }
}

HTML

<ul class="navbar" id="navbar">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
    <li>
        <a href="#">Item 5</a>
    </li>
    <li class="navbar-icon">
        <a href="javascript:void(0);" style="font-size:15px;" onclick="menuToggle()"><i class="ion-navicon"></i></a>
    </li>
</ul>

javascript html css css3

asked by anonymous 29.01.2017 / 03:58

1 answer

Use .htaccess in a directory with files and folders with the same name Redirected to Nginx page [closed]

score 2 · Accepted Answer

See working here JSFiddle .

Uses the scroll function, detects the event to scroll the page, verifies that the rolled-down size is greater than the height of navbar . If greater, add the class that forces it to be on top - otherwise, remove the class if it has ever been assigned.

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 60)
        {
            $('#navbar').addClass('navbar-fixed-top', 500);
        } else {
            $('#navbar').removeClass('navbar-fixed-top', 500);  
        }
    });
});

Here the CSS , with the class mentioned in the above section. The class forces the position to be fixed at the top and the horizontal size to be extended to 100%.

.navbar-fixed-top {
    position: fixed !important;
    top: 0;
    width: 100%;
}