對div的固定導航效果

Question

我發現此代碼。

$(document).ready(function(){ 
 
\t $(window).bind('scroll', function() { 
 
\t var navHeight = $(window).height() - 70; 
 
\t \t \t if ($(window).scrollTop() > navHeight) { 
 
\t \t \t \t $('nav').addClass('fixed'); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t $('nav').removeClass('fixed'); 
 
\t \t \t } 
 
\t \t }); 
 
\t });

/* 
 
Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS 
 
Description: Create a sticky navigation bar that remains fixed to the top after scroll 
 
Author: Stanislav Kostadinov 
 
Author URI: http://stanislav.it 
 
Version: 1.0.0 - 11.01.2014 
 
*/ 
 

 
* {margin: 0; padding: 0;} 
 

 
a {text-decoration: none;} 
 

 
/* This class is added on scroll */ 
 
.fixed { 
 
\t position: fixed; 
 
\t top: 0; 
 
\t height: 70px; 
 
\t z-index: 1; 
 
} 
 

 
body { 
 
\t color: #fff; 
 
\t font-family: 'open-sans-bold'; 
 
\t font-size: 18px; 
 
\t text-align: center; 
 
} 
 

 
/* Font Face Settings */ 
 
@font-face { 
 
    font-family: 'open-sans-bold'; 
 
\t src: url('../fonts/open-sans/OpenSans-Bold.eot'); 
 
    src: url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'), 
 
\t \t url('../fonts/open-sans/OpenSans-Bold.ttf'); 
 
    font-weight: normal; 
 
} \t 
 

 
/* Navigation Settings */ 
 
nav { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t background: #fff; 
 
} 
 

 
nav li { 
 
\t display: inline-block; 
 
\t padding: 24px 10px; 
 
} 
 

 
nav li a { 
 
\t color: #757575; 
 
\t text-transform: uppercase; 
 
} 
 

 
section { 
 
\t height: 100vh; 
 
} 
 

 
/* Screens Settings */ 
 
#screen1 { \t 
 
\t background: #43b29d; 
 
} 
 

 
#screen1 p { 
 
\t padding-top: 200px; 
 
} 
 

 
#screen2 { 
 
\t background: #efc94d; 
 
} 
 

 
#screen3 { 
 
\t background: #e1793d; 
 
} 
 

 
@media only screen and (max-width: 520px) { 
 

 
\t nav li { 
 
\t \t padding: 24px 4px; 
 
\t } 
 

 
\t nav li a { 
 
\t \t font-size: 14px; 
 
\t } 
 

 
}

<section id="screen1"> 
 

 
\t <p>Scroll down</p> 
 

 
\t <nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t <li><a href="#">About</a></li> 
 
\t \t \t <li><a href="#">Services</a></li> 
 
\t \t \t <li><a href="#">Team</a></li> 
 
\t \t \t <li><a href="#">Contact</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 

 
</section> 
 
\t 
 
<section id="screen2"></section> 
 
<section id="screen3"></section>

這裏是一個工作實施例。 http://stanhub.com/tutorials/sticky-navigation/

它的粘性菜單和很好的作品，但問題是它只是粘着然後頁面全部向下滾動。是否有可能修復後導航div 40px向下滾動？可以說導航盒和頂級瀏覽器之間有40個像素。

Answer 1

是的，更改代碼中的變量從 var navHeight = $（window）.height（） - 70;

到 var navHeight = $（window）.height（） - 40;

應當與指定高度

Answer 2

沒有你可以發佈您的代碼，這個解決您的問題是我能做到根據您的描述最好的。

改變你的Javascript這樣的：

$(document).ready(function(){ 
    $(window).bind('scroll', function() { 
     var navHeight = 40; //Match the distance of your nav bar from the top of the window 
     if ($(window).scrollTop() > navHeight) { 
      $('nav').addClass('fixed'); 
     } 
     else { 
      $('nav').removeClass('fixed'); 
     } 
    }); 
});