所以我看到了很多从 position:absolute
更改 div
的答案;到位置:固定
;当它到达页面下方的特定点(例如 300px
)时;但是,我想知道是否可以在点击实际的 div
后将其修复,而不是像 300px
这样的特定点?由于我的页面始终以 100%
高度/宽度启动,并且我的导航位于底部,因此它始终会发生变化。这是我的代码。
CSS:
nav {
background:rgba(0,0,0,0.5);
position:absolute;
bottom:0;
width:100%;
text-align:center;
z-index:9999;
margin:0;
padding:25px 0;
}
<小时/>
JavaScript:
jQuery(function($) {
function fixDiv() {
var $cache = $('#nav');
if ($(window).scrollTop() > 300) {
$cache.css({'position': 'fixed'});
}
else {
$cache.css({'position': 'absolute'});
}
}
$(window).scroll(fixDiv);
fixDiv();
});
<小时/>
我只是希望 300
成为 #nav
,这样当它到达它时,它就会粘住。
最佳答案
看看.offset()
。
因此,如果 $('#nav').offset().top
等于 $(window).scrollTop()
,您的元素应该位于窗口的顶部.
这是一个 fiddle :http://jsfiddle.net/vj5wm0uj/1/
关于jquery - 滚动到时将 div 更改为固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25817745/