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