Question

我正在尝试创建一个简单的滚动效果，当页面向下滚动时页面标题会隐藏，并在向上滚动时重新出现。 HTML：

<header class="siteHeader">...</header>

...通过应用CSS类“siteHeader - up来隐藏。”

我正在使用jQuery。这是我的代码：

$(function () {

    var $siteHeader = $('.siteHeader');
    var $window = $(window);

    // to determine scroll direction. initializes to 0 on page load
    var scrollReference = 0;  

    function fixedHeader () {

        var scrollPosition = $window.scrollTop();

        // if page is scrolling down, apply the CSS class
        if (scrollPosition > scrollReference) 
        {
            $siteHeader.addClass('siteHeader--up');
        } 

        // otherwise, page is scrolling up. Remove the class
        else 
        {
            $siteHeader.removeClass('siteHeader--up');
        }

        // update reference point to equal where user stopped scrolling
        scrollReference = scrollPosition
    }

    $window.scroll(function () {
        fixedHeader();
    });

});

这在大多数情况下都可以正常工作。问题是当我向下滚动页面然后刷新页面时。不知何故，滚动功能正在被触发。标题将暂时可见，然后隐藏（就好像页面认为它正在向下滚动）。该函数在页面加载时被触发（用console.log确认），但我不明白为什么，因为它只应该在滚动时触发。

有人可以帮我理解发生了什么以及如何防止它发生吗？

谢谢！

Answer 1

这是预期的行为。刷新页面时，浏览器会记住滚动位置，并将页面滚动到该位置，稍后会触发滚动事件。

我认为这可能是解决问题的一种解决方法：

当jQuery滚动事件被触发时，您可以获得timeStamp属性，如果此timeStamp非常接近window.onload timeStamp，那么肯定会不能是用户触发的事件：

我使用了50毫秒的值，测试是否足够，我认为是。

var startTime = false;

$(function () {

    var $siteHeader = $('.siteHeader');

    var $window = $(window);

    // to determine scroll direction. initializes to 0 on page load
    var scrollReference = 0;  

    function fixedHeader () {

        var scrollPosition = $window.scrollTop();

        // if page is scrolling down, apply the CSS class
        if (scrollPosition > scrollReference) 
        {
            $siteHeader.addClass('siteHeader--up');
        } 

        // otherwise, page is scrolling up. Remove the class
        else 
        {
            $siteHeader.removeClass('siteHeader--up');
        }

        // update reference point to equal where user stopped scrolling
        scrollReference = scrollPosition
    }

    $window.on("load", function (evt) {

        startTime = evt.timeStamp;

    });

    $window.on("scroll", function (evt) {

        if(!startTime || evt.timeStamp - startTime < 50) return;

        fixedHeader();

    });

});

Answer 2

尝试在窗口加载和滚动功能中加载函数：

 $window.load(function(){
     fixedHeader();
 });

或准备好文件：

$(document).ready(function () {
    fixedHeader();
});

这应该触发并重置您所做的变量中的值，因此无论滚动位置如何，都要确定是否将标题设置为固定。

让我知道它是否有效，因为我也有点好奇:)

为什么我的滚动功能会在页面加载时触发？

2 个答案: