javascript - 持久 header 导致网站高度崩溃

标签 javascript jquery html css

这是我的代码:

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);
}

Example fiddle

请注意,padding-top 可以设置在要修复的元素上方的任何元素上(如果需要)。我只使用了 body,因为它最方便作为示例。

关于javascript - 持久 header 导致网站高度崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23610032/

相关文章:

javascript - Mailchimp AJAX jQuery 意外 token <

javascript - jquery - 选择具有特定内容的元素

jquery - 小于选择器

javascript - 根据下拉选择使输入字段成为必填项

javascript - &lt;script src ="file.js"> 和 &lt;script src ="./file.js"> 一样吗?

javascript - 有时 window.resize 需要两次调整大小才能实际执行我的 javascript

html - 如何阻止 Google 索引网站?

php - 跨浏览器异步 uploader ?

html - 无法将一个 div 平均分成 6 个部分

css - IE9 再次与众不同