javascript - 用页眉扩展边距

Question

我有一个标题，当您向下滚动时，它会保持静态并消失。然后，当您向上滚动时，标题会出现在用户在页面上的任何位置。这一切都很好，但是当我一直滚动到顶部时，由于页眉，我的页边距会扩大，然后一旦它到达最顶部，页边距就会回升以匹配页眉。

我有一张带有叠加层的横幅图片。向下滚动一种方式，然后向上滚动。您将看到更改后的页边距和图像叠加层。除此之外，标题是“烦躁的”。

我该怎么做才能使边距始终保持不变并且不会回升？

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
            if (st < navbarHeight) {
            if (st === 0 || st < 1) {
            $('header').css('position', 'static');
          }
        } else {
            $('header').css('position', 'fixed');
        }
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}


<header class="nav-down">
</header>


header {
    background: #F2F2F2;
    height: 120px;
    top: 0;
    transition: top 0.5s ease-in-out;
    width: 100%;
    z-index: 100;
    border-bottom: 1px solid #9C9C9C;
}
.nav-up {
    top: -123px;
}

Answer 1

这是因为当您将 header 的 position 更改为 fixed 时，它会导致 DOM 向上移动相同的 header 的高度 因为你是 header 不再影响 DOM 布局。

修复:

当您将 position: fixed 应用到您的 #service-img 时，将附加具有相同高度的标题的 margin-top它在代码中(未经测试，因为您使用的是实时网站):

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if (Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight) {
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        if (st < navbarHeight) {
            if (st === 0 || st < 1) {
                $('header').css('position', 'static');
                $('#service-img').css('margin-top', '0px');
            }
        } else {
            $('header').css('position', 'fixed');
            $('#service-img').css('margin-top', '120px');
        }
        // Scroll Up
        if (st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

编辑:

刚刚使用我的代码使用 Chrome DevTools 在您的网站上进行了测试，它运行良好。希望对您有所帮助!