这是我的代码:
http://jsfiddle.net/KCb5z/8/embedded/result/ http://jsfiddle.net/KCb5z/8/
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
} else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
}
});
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
问题是当我滚动经过黄色栏时,它会将其 CSS 从相对更改为固定。这意味着网站现在不那么高了,它把所有的内容都拖了上去,造成了一种故障效果。
这几乎就像我需要一个包含黄色栏的 div 以保持该高度,或者插入某种 div 以保持网站高度相同(无论该栏是否停靠)。
谁能告诉我这是如何实现的?
最佳答案
当position设置为fixed时,在body的顶部添加padding以容纳它。同样,当元素未固定时删除填充:
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
}
else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
$('body').css('padding-top', 0);
}
请注意,padding-top
可以设置在要修复的元素上方的任何元素上(如果需要)。我只使用了 body
,因为它最方便作为示例。
关于javascript - 持久 header 导致网站高度崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23610032/