粘滞导航栏不起作用

我正在尝试创建一个导航栏，它在一些滚动后粘到屏幕的顶部。我跟着两个不同的教程，但我似乎无法让他们任何一个正常工作。粘滞导航栏不起作用

first教程根本不会粘在屏幕的顶部。 second教程确实坚持屏幕的顶部，但如果向下滚动得足够远，则在导航到顶部之后才能看到导航。

这就是我现在所拥有的（下面的第一个教程）：

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); 
    } 

});

这是继第二教程JS代码：

$(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 
      } 
     }); 
    });

全部代码在这里：https://jsfiddle.net/linahsie/rhp65j2b/2/ 谢谢！

来源

2017-01-10 Lina Sie

在你的JS，n应#nav-bar，ns（因为你切换类）应nav-bar-scrolled和hdr应该是头的底部位置，因为这就是你想要的导航贴上自己点到窗口的顶部。然后在你的CSS中，你想使用#nav-bar.nav-bar-scrolled作为固定菜单的选择器来匹配你在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>

来源

2017-01-10 02:44:47

使用我的jsfiddle但想你的代码仍然不起作用。你有什么其他的建议？谢谢！ –

我也更新了我的问题中的代码，以您的建议！ –

它现在有效！谢谢！ –

看了一眼jQuery的，你定义VAR n = $("#nav");但你不必与id="nav"，变化nav到n = $("#nav-bar");

来源

2017-01-10 02:45:04

粘滞导航栏不起作用

回答

相关问题