我正在尝试有一个固定的垂直导航栏,但是仅当用户向下滚动到该栏时。我将其放置在标题下为66px,并且一旦用户向下滚动至其66px边距并固定在屏幕上就需要捕获它,但是我可以看到它并不完美。
https://jsfiddle.net/1krd9zpc/7/
$(window).on('scroll', function() {
if($(window).scrollTop() > $('#navbox').offset().top){
$('#navbox').css({
'top': $(window).scrollTop() > 0 ? '0px' : '66px',
'position': 'fixed'
});
}
});
此代码(由Mathias W改进)可以正常工作,当我们向上滚动时,需要将其重置为先前的位置。
最佳答案
您必须应用css属性position并将其值设置为fixed(position:fixed)。
$(window).on('scroll', function() {
$('#navbox').css({
'top': $(window).scrollTop() > 0 ? '0px' : '66px',
'position': 'fixed'
});
});
参见小提琴:
https://jsfiddle.net/3g52v5oh/
如果您只想在滚动时到达元素后“捕获”,则可以使用$('#navbox')。offset()。top检查navbox的偏移位置。
$(window).on('scroll', function() {
if($(window).scrollTop() > $('#navbox').offset().top){
$('#navbox').css({
'top': $(window).scrollTop() > 0 ? '0px' : '66px',
'position': 'fixed'
});
}
});
更新接受的答案
将导航盒的顶部偏移量保存到变量,然后检查窗口的scrollTop值是小于还是大于
var navboxHeight = $('#navbox').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > navboxHeight){
$('#navbox').css({
'top': $(window).scrollTop() > 0 ? '0px' : '66px',
'position': 'fixed'
});
}
// Reset navbox to it's default position
if($(window).scrollTop() < navboxHeight){
$('#navbox').css({
'top': '',
'position': 'static'
});
}
});