Sticky navigation bar doesn't work

Question

I am trying to create a navigation bar that sticks to the top of the screen after some scrolling. I followed two different tutorials but I can't seem to make either of them work properly.

The first tutorial does not stick to the top of the screen at all. The second tutorial does stick to the top of the screen, but if you scroll down far enough, you can't see the navigation until after it sticks to the top.

This is what I have right now (following the first tutorial):

var  n = $("#nav-bar");
    ns = "nav-bar-scrolled";
    hdr = $('#nav-bar').offset().top;

$(window).scroll(function(){
   if($(this).scrollTop() > hdr){
       n.addClass(ns);
   }else{
       n.removeClass(ns);
   }

});

This is the JS code following the second tutorial:

$(function(){
    // Check the initial Poistion of the Sticky Header
     var stickyHeaderTop = $('header').height();

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {              
                $('#nav-bar').css({position: 'fixed', top: '0px'});
                $('#stickyalias').css('display', 'block'); //this doesn't do anything
            } else {
                $('#nav-bar').css({position: 'static', top: '0px'});
                $('#stickyalias').css('display', 'none'); //this doesn't do anything
            }
        });
  });

Full code here: https://jsfiddle.net/linahsie/rhp65j2b/2/ Thank you!

score 0 · Accepted Answer · answered Jan 10 '17 at 02:44

In your JS, n should be #nav-bar, ns (since you're toggling a class) should be nav-bar-scrolled, and hdr should be the bottom position of the header, since that's the point where you want the nav to affix itself to the top of the window. Then in your CSS, you want to use #nav-bar.nav-bar-scrolled as the selector for the fixed menu to match the changes you're making in your JS.

var  n = $("#nav-bar");
    ns = "nav-bar-scrolled";
    hdr = $('header').offset().top + $('header').outerHeight();

$(window).scroll(function(){
   if($(this).scrollTop() > hdr){
       n.addClass(ns);
   }else{
       n.removeClass(ns);
   }
    
});

/*
$(function(){
    // Check the initial Poistion of the Sticky Header
     var stickyHeaderTop = $('header').height();
 
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {              
                $('nav').css({position: 'fixed', top: '0px'});
                $('#stickyalias').css('display', 'block');
            } else {
                $('nav').css({position: 'static', top: '0px'});
                $('#stickyalias').css('display', 'none');
            }
        });
  });

*/


/*
$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('nav').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('nav').css({
                position: 'fixed',
                top: '0px'
            });
            $('#about').css('margin-top', $('nav').outerHeight(true) + parseInt($('header').css('marginBottom')));
        } else {
            $('nav').css({
                position: 'static',
                top: '0px'
            });
            $('#about').css('margin-top', '0px');
        }
    });
});
*/

*{
    margin: 0;
    padding: 0;
}

.container{
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
}

header{
    height: 100vh;
    background: #f07057;
}

#after-header{
    padding-top: 100vh;
}

#nav-bar,
#about,
#a2{
    position: relative;
}

#header-content{
    position: absolute;
    top: 50%;
    left: 50%;
}

#nav-bar{
    height: 75px;
    font-family: 'Montserrat';
    background-color: #FFE77C;
    z-index: 150;
    width: 100%;
}

header{
    position: fixed;
    width: 100%;
}

#nav-bar.nav-bar-scrolled{
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
}

#nav-bar h1{
    padding-top: 10px;
    font-size: 270%;
    text-align: center;
    float: left;
}

#nav-list{
    float: right;
}

.dir{
    float: left;
    padding-top: 25px;
    text-decoration:none;
    padding-left: 15px;
}

#about{
    height: 100vh;
    background-color: antiquewhite;
}

#a2{
    height: 100vh;
    background-color: beige;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        
        <header>
            <div id="header-content">
                <h1>Text Here</h1>
               
            </div> <!--header-content-->
        </header>
        
        <div id="after-header">
            <nav id="nav-bar">
                <div class="container">
                    <h1>Nav Bar</h1>
  
                </div> <!--container-->
            </nav>  <!--nav-->
        
            <div id="about">
                <div class="container">
                    <h1>Hello, world!</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
                </div>
            </div> <!--end of about-->
           
           <div id="a2">
                <div class="container">
                    <h1>Hello, world!</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
                </div>
            </div> 
        
        </div> <!--end of after-header-->
            
  </body>

I tried your code using my jsfiddle but it still doesn't work. Do you have any other suggestions? Thanks! — Lina Sie, Jan 10 '17 at 03:02

score 0 · Answer 2 · answered Jan 10 '17 at 02:45

0

Had a look at the jquery, you define var n = $("#nav"); but you don't have a nav with id="nav", change to n = $("#nav-bar");

answered Jan 10 '17 at 02:45

Wim Mertens

1,780
3
20
31

Sticky navigation bar doesn't work

2 Answers2