如何使用CSS阻止HTML元素从屏幕顶部滚动
如何使用CSS阻止HTML元素从屏幕顶部滚动
提问于 2012-04-02 21:50:20
我尝试在我的页面上设置站点名称/徽标和导航，以便当它到达页面顶部时，它会留在那里，而不是从屏幕顶部消失。我已经尝试过position: fixed;，但是除非我遗漏了一些我不需要做的事情。
我的布局如下所示，我不希望在页面顶部消失的是header-top和header-nave -
<header>
<div id="header-top"></div>
<div id="header-middle"></div>
<div id="header-nav"></div>
</header>有没有人对此有什么建议，或者知道CSS是否可行？无论哪种方式，一些指向教程的指针，甚至是用于实现这一点的方法都将是有帮助的。
如果需要的话，我对JS是开放的。谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-04-03 19:37:47
感谢有用的提示和指示(@Wesley Terry和@eZakto)，这就是我想要做的JS。
$(function(){
var top = $('#header-top-full-width');
var nav = $('#header-nav-full-width');
$(window).scroll(function(){
if($(window).scrollTop() >= 90){
border_bottom('0');
} else if($(window).scrollTop() === 89){
border_bottom('1');
} else if($(window).scrollTop() === 88){
border_bottom('2');
} else if($(window).scrollTop() <= 87){
border_bottom('3');
}
if($(window).scrollTop() >= 90){ // To far, the navigation needs to be set in place
nav.css('position', 'fixed');
nav.css('margin-top', '-90px');
if($('#nav-spacer').length) { // Add a spacer so the height is correct if needs be
} else {
$('<div id="nav-spacer"></div>').insertAfter('#header-nav-full-width');
$('#nav-spacer').css('height', '32px');
}
} else { // The navigation needs to just be static, so remove the spacer and make it static
nav.css('position', 'static');
nav.css('margin-top', '0');
$('#nav-spacer').remove();
}
});
});Stack Overflow用户
发布于 2012-04-02 22:34:22
有一堆关于如何实现这一点的演示。基本上，你需要弄清楚窗口向下多远，才能开始使固定位置的导航变得“粘性”。
这里有一个很好的演示的链接：http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9977716
复制相关文章
相似问题
腾讯云开发者
