粘滯導航欄不起作用

我正在嘗試創建一個導航欄，它在一些滾動後粘到屏幕的頂部。我跟着兩個不同的教程，但我似乎無法讓他們任何一個正常工作。粘滯導航欄不起作用

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

粘滯導航欄不起作用

回答

相關問題