我创建了一个额外的菜单栏 (.secondnav
),我想将其放在网站中原始标题 (#headAnnouncementWrapper
) 的正下方。问题是,滚动时,标题的高度从相对位置变为固定在顶部时会发生变化,在移动设备上也是如此。
我一直在尝试:
var scrolled = 78;
var headHeight = $('#headerAnnouncementWrapper').height();
$(window).scroll(function() {
if ($(window).scrollTop() > scrolled) {
$('.secondnav').css('position', 'fixed');
$('.secondnav').css('top', headHeight);
} else {
$('.secondnav').css('position', 'relative'),
$('.secondnav').css('top', headHeight);
}
});
但我不知道我应该如何计算 headHeight
变量以便它在高度变化时发生变化,以及如何将该结果用作 .secondnav< 的最高值
的 css。
最佳答案
检查滚动事件中主标题的高度。每次滚动事件触发时,它都会重新检查高度。然后,下一行将调整下页眉的上边距以匹配上页眉的高度。此处的 Top-margin 取代了您的仓位方法。
var scrolled = 78;
$(window).scroll(function() {
var headHeight = $('#headerAnnouncementWrapper').height();
$('.secondnav').css('marginTop', headHeight);
if ($(window).scrollTop() > scrolled) {
$('.secondnav').css('position', 'fixed');
} else {
$('.secondnav').css('position', 'relative'),
}
});
关于javascript - 如果它在滚动时改变高度,我该如何修复原始标题下的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44596137/