Jquery 在滚动上添加类并在刷新页面后保持行为

我有一个功能完善的元素，它的行为应该是正常的。一旦用户滚动经过一个特定点，就会添加一个类。当用户回滚时，该类将被删除。我的问题是，一旦添加了类，当我刷新页面时，该类将不再添加，直到我再次滚动

这是间歇性的。Firefox是不断产生问题的主要浏览器。铬是开和关

我已经包含了一个非常简化的代码片段，但是它不容易看到，因为它需要刷新。我搜索了一整天，查看了cookies、本地存储、classie.js。我相信有比这些更简单、更简单的解决方案

以下是一个存在类似问题的网站：。请在Firefox中查看。点击页面左上角的导航按钮，向下滚动，看看会发生什么。然后刷新，你会看到它会回到原来的状态，直到你再次滚动

$（窗口）。滚动（函数（）{
变量框=$（'.box'）；
var scroll=$（窗口）.scrollTop（）；
如果（滚动>100）{
removeClass（'box-NotScrolled'）；
addClass（'boxScrolled'）；
}否则{
if（box.hasClass（'boxScrolled'））{
removeClass（'boxScrolled'）；
addClass（'box-NotScrolled'）；
}
}
});
.box{
位置：固定；
最高：5%；
左：5%；
宽度：200px；
高度：200px；
背景色：红色；
}
.boxScrolled{
背景颜色：绿色；
}
.框未滚动{
背景色：红色；
}
加载脚本以及滚动或调整大小时，将运行此操作。这将在页面加载时为您进行检查


//创建classOnScroll函数
函数classOnScroll（）{
设$box=$（'.box'），
$scroll=$（窗口）.scrollTop（）；
如果（$scroll>100）{
if（！$box.hasClass（'boxScrolled'））
$box.addClass（'boxScrolled'）；
}
其他的
$box.removeClass（'boxScrolled'）；
}
//在第一次站点运行时运行
classOnScroll（）；
//滚动运行并调整大小
$（窗口）.on（'scroll resize'，classOnScroll）
.box{
位置：固定；
最高：5%；
左：5%；
宽度：200px；
高度：200px；
背景色：红色；
}
.boxScrolled{
背景颜色：绿色；
}
加载脚本以及滚动或调整大小时，将运行此操作。这将在页面加载时为您进行检查


//创建classOnScroll函数
函数classOnScroll（）{
设$box=$（'.box'），
$scroll=$（窗口）.scrollTop（）；
如果（$scroll>100）{
if（！$box.hasClass（'boxScrolled'））
$box.addClass（'boxScrolled'）；
}
其他的
$box.removeClass（'boxScrolled'）；
}
//在第一次站点运行时运行
classOnScroll（）；
//滚动运行并调整大小
$（窗口）.on（'scroll resize'，classOnScroll）
.box{
位置：固定；
最高：5%；
左：5%；
宽度：200px；
高度：200px；
背景色：红色；
}
.boxScrolled{
背景颜色：绿色；
}


“我搜索了一整天，查看了cookies、本地存储、classie.js。我相信有比这些更简单、更简单的解决方案。”

不，那是你要用的。CSS和HTML不能“记住”任何东西。您可以在用户滚动时设置
localStorage
项，然后在页面加载时检查该项，如果该项存在，则通过JS添加该类

由于
localStorage
在沙箱环境中不适用于发布，因此，这里有一个代码笔-


$（函数（）{
变量框=$（'.box'）；
函数setScrolled（）{
removeClass（'box-NotScrolled'）；
addClass（'boxScrolled'）；
setItem（'scrolled'，true）；
}
函数removeScrolled（）{
if（box.hasClass（'boxScrolled'））{
removeClass（'boxScrolled'）；
addClass（'box-NotScrolled'）；
}
}
if（localStorage.getItem（'scrolled'））{
setScrolled（）；
}
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>100）{
setScrolled（）；
}否则{
移除克隆（）；
}
});
})
.box{
位置：固定；
最高：5%；
左：5%；
宽度：200px；
高度：200px；
背景色：红色；
}
.boxScrolled{
背景颜色：绿色；
}
.框未滚动{
背景色：红色；
}


“我搜索了一整天，查看了cookies、本地存储、classie.js。我相信有比这些更简单、更简单的解决方案。”

不，那是你要用的。CSS和HTML不能“记住”任何东西。您可以在用户滚动时设置
localStorage
项，然后在页面加载时检查该项，如果该项存在，则通过JS添加该类

由于
localStorage
在沙箱环境中不适用于发布，因此，这里有一个代码笔-


$（函数（）{
变量框=$（'.box'）；
函数setScrolled（）{
removeClass（'box-NotScrolled'）；
addClass（'boxScrolled'）；
setItem（'scrolled'，true）；
}
函数removeScrolled（）{
if（box.hasClass（'boxScrolled'））{
removeClass（'boxScrolled'）；
addClass（'box-NotScrolled'）；
}
}
if（localStorage.getItem（'scrolled'））{
setScrolled（）；
}
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>100）{
setScrolled（）；
}否则{
移除克隆（）；
}
});
})
.box{
位置：固定；
最高：5%；
左：5%；
宽度：200px；
高度：200px；
背景色：红色；
}
.boxScrolled{
背景颜色：绿色；
}
.框未滚动{
背景色：红色；
}

“我搜索了一整天，查看了cookies、本地存储、classie.js。我确信有一个比这些更简单、更简单的解决方案。”不，这就是你要使用的。CSS和HTML不会“记住”任何东西。我会在滚动时设置一个localStorage项，然后在加载页面时读取该项，如果该项存在，则通过JS添加该类。感谢您的响应。这是有道理的。我要试一试