粘滞滚动条在页面顶部改变高度

我有一个粘滞的导航栏，它在触摸时粘在浏览器窗口的顶部。问题是，只要触及顶部，导航栏的高度就会加倍。我似乎无法看出问题所在。粘滞滚动条在页面顶部改变高度

下面是我使用的JavaScript：

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){ 
    $(function() { 
    var a = function() { 
    var b = $(window).scrollTop(); 
    var d = $("#scroller-anchor").offset({scroll:false}).top; 
    var c=$("#scroller"); 
    if (b>d) { 
    c.css({position:"fixed",top:"0px", width:"100%",}) 
    } else { 
    if (b<=d) { 
    c.css({position:"relative",top:""}) 
    } 
} 
}; 
$(window).scroll(a);a() 
}); 
});//]]> 
</script>

还有HTML：

<div id="scroller-anchor"></div> 
<div id="scroller"> 
<div class="wrapper"> 
</div> 
</div>

你可以看到这个问题here。

来源

2013-06-05 Dustin Lee

看起来您需要从.navigation类中删除margin-bottom。请不要使用内联样式或！重要。

来源

2013-06-05 18:14:45

谢谢，Tim。这工作完美。我将删除内联CSS：） –

Tim，您创建的粘性菜单看起来很棒。有没有可能使用var部分？我正在处理的网站在不同的页面上有部分。我试了一下，但没有它，它似乎没有工作。 –

你的意思是我的Github上的那个？没有每个页面上的部分都可以使用它，但是说实话，没有太多意义。大部分代码都是关于突出显示活动部分，滚动到该部分以及突出显示菜单上的按钮。如果没有这些，你最好从头开始写一个新的粘性卷轴。这是脱离这个主题的话题，所以给我发电子邮件，如果你需要关于那个小项目的更多信息......我的电子邮件是在演示。 –

#scroller { 
    height:30px; /* height of menu */ 
}

解决了问题。

来源

2013-06-05 18:14:07

粘滞滚动条在页面顶部改变高度

回答

相关问题