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

【问题标题】：Why does my scroll function trigger on page load?为什么我的滚动功能在页面加载时触发？
【发布时间】：2016-01-03 21:29:58
【问题描述】：

我正在尝试创建一个简单的滚动效果，当页面向下滚动时页面标题隐藏并在向上滚动时重新出现。 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 确认），但我不明白为什么，因为它只应该在滚动时触发。

有人可以帮助我了解发生了什么以及如何预防吗？

谢谢！

【问题讨论】：

你好，你可以尝试让它显示：默认情况下没有，然后检查页面位置，如果足够到顶部 .show() 如果没有什么也不做
浏览器在刷新页面时会记住滚动状态，并会自动向下滚动到刷新时的位置。这就是当您重新加载页面时会触发滚动事件的原因。
有道理，HaukurHaf。那么，你能想出一种方法来阻止这个函数被触发吗？

标签： javascript jquery html css scroll

【解决方案1】：

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

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

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

我用的是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();

    });

});

【讨论】：

【解决方案2】：

尝试在窗口加载以及滚动功能中加载该功能：

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

或者在文件准备好的时候：

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

这应该会触发并重置您创建的变量中的值，从而确定是否将标题设置为固定，无论滚动位置如何。

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

【讨论】：

事件按以下顺序触发：文档就绪 > 窗口加载 > 自动滚动事件。