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

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

HTML

：

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

这在很大程度上是可行的。问题是当我向下滚动页面，然后刷新页面时。不知怎的，滚动功能被触发了。标题会显示一段时间，然后隐藏（好像页面认为它正在向下滚动）。该功能在页面加载时被触发（通过

控制台.log确认），但我不明白为什么，因为它只应该在滚动时启动

有人能帮我了解发生了什么事，以及我如何预防它吗

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

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

当触发
jQuery
滚动事件时，您可以获得
timeStamp
属性，如果此
timeStamp
非常接近
窗口。onload
timeStamp
，它肯定不会是由用户触发的事件：

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

var startTime=false；
$（函数（）{
变量$siteHeader=$（'.siteHeader'）；
变量$window=$（window）；
//确定滚动方向。页面加载时初始化为0
var scrollReference=0；
函数fixedHeader（）{
var scrollPosition=$window.scrollTop（）；
//如果页面向下滚动，则应用CSS类
如果（滚动位置>滚动参考）
{
$siteHeader.addClass（'siteHeader--up'）；
} 
//否则，页面将向上滚动。请删除该类
其他的
{
$siteHeader.removeClass（'siteHeader--up'）；
}
//将参考点更新为用户停止滚动的位置
scrollReference=滚动位置
}
$window.on（“加载”，函数（evt）{
startTime=evt.timeStamp；
});
$window.on（“滚动”），功能（evt）{
如果（！startTime | | evt.timeStamp-startTime<50）返回；
fixedHeader（）；
});
});
尝试在窗口加载和滚动功能中加载该功能：

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


或者在文件准备就绪时，可能：



这将触发并重置所做变量中的值，从而确定是否将标题设置为固定，而不管滚动位置如何

让我知道它是否有效，因为我也有点好奇：）
您好，您可以尝试将其显示为：默认情况下无，然后检查页面位置，如果足够高。show（）如果不执行任何操作浏览器会在刷新页面时记住滚动状态，并自动向下滚动到刷新页面时的位置。这就是为什么重新加载页面时会触发scroll事件的原因。这是有道理的，HaukurHaf。那么，您能想出一种方法来阻止此函数触发吗？事件按以下顺序触发：document ready>window onload>automatic scroll event。
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();

    });

});

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

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