Question

我正在尝试使用一个脚本，当您将页面向下滚动到nav标签时，该脚本将修复页面顶部的nav元素。然而，它现在正在做的是，只有当你已经将页面的一半向下滚动到导航标签之后时才开始在页面顶部进行修复？您可以查看有问题的页面here

脚本

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

HTML

<nav id="nav_desktop"> 

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#dt">Downtown Tour</a></li>
    <li><a href="#gt">Growth Tour</a></li>
    <li><a href="#lt">Landmarks Tour</a></li>
    <li><a href="#ct">Contact</a></li>
</ul>

CSS

.fixed {
position: fixed;
top: 0;
height: 25px;
z-index: 1;
}

Answer 1

var navHeight = $(window).height() - 25;

此行不会像您预期的那样将导航设置到顶部。它只是获得窗口高度并将其减去25。

首先需要获取offsetTop栏的nav值，以检查窗口的scrollTop值是否达到offsetTop的{{1}}杆

nav

我希望它有所帮助！

Answer 2

如果向下滚动页面底部，您可以看到站点中的导航栏正在修复。因此，如果您希望在导航栏滚出视口后修复它，您可以尝试以下代码：

<script>
    $(document).ready(function(){
        var navHeight = $( 'nav' ).offset().top;
        $(window).bind('scroll', function() {
            if ($(window).scrollTop() > navHeight) {
                $('nav').addClass('fixed');
            }
            else {
                $('nav').removeClass('fixed');
            }
        });
    });
</script>

$('nav').offset().top;获取导航栏相对于文档顶部位置的顶部位置。因此，一旦滚动超过该值，就会向其添加fixed类。

另外，我建议您更改fixed类的某些css属性。你应该保持如下：

.fixed {
    position: fixed;
    top: 0;
    width: 88%;
    height: 25px;
    z-index: 1;
}

您必须将宽度（导航栏中的88％）设置为固定定位元素，因为position:fixed根据div的内容而不是整个宽度获取宽度。

滚动后导航未固定在页面顶部？

2 个答案: