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

Question

我有一个功能完好的元素，它的行为与其应该一样。一旦用户滚动过去某个特定点，就会添加一个班级。当用户向后滚动时，该类将被删除。我的问题是，一旦添加了类，当我刷新页面时，不再添加该类，直到我再次滚动。

这是间歇性的。 Firefox是导致问题不断出现的主要浏览器。 Chrome开启和关闭。

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

这是一个类似的网站：https://bert.house/en/。请在Firefox中查看。页面左上方的导航按钮向下滚动，看看会发生什么。然后刷新，你会看到它回到它的原始状态，直到你再次滚动。

$(window).scroll(function() { 
 
    var box = $('.box'); 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 100) { 
 
     box.removeClass('box-NotScrolled'); 
 
     box.addClass('boxScrolled'); 
 
    } else { 
 
     if (box.hasClass('boxScrolled')) { 
 
     box.removeClass('boxScrolled'); 
 
     box.addClass('box-NotScrolled'); 
 
     } 
 
    } 
 
    });

.box { 
 
    position: fixed; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.boxScrolled { 
 
    background-color: green; 
 
} 
 
.box-NotScrolled { 
 
    background-color: red; 
 
}

<div class="box"></div> 
 
<div style="height: 1000px"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这不是一个大问题。这是一个困扰我的问题，因为必须有解决方法。任何帮助都会很棒。谢谢。

Answer 1

当您加载脚本以及滚动或调整大小时，这将运行。这将基本上检查您在页面加载。

//Create classOnScroll function 
 
function classOnScroll(){ 
 
    let $box = $('.box'), 
 
     $scroll = $(window).scrollTop(); 
 
    
 
    if($scroll > 100){ 
 
    if(!$box.hasClass('boxScrolled')) 
 
     $box.addClass('boxScrolled'); 
 
    } 
 
    else 
 
    $box.removeClass('boxScrolled'); 
 

 
} 
 

 
//Run on first site run 
 
classOnScroll(); 
 

 
//Run on scroll and resize 
 
$(window).on('scroll resize',classOnScroll);

.box { 
 
    position: fixed; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.boxScrolled { 
 
    background-color: green; 
 
}

<div class="box"></div> 
 
<div style="height: 1000px"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

“我搜索了一整天，看着饼干，本地存储，classie.js。我敢肯定有比那些更容易，更简单的解决方案。”

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

而且由于localStorage不会在沙箱环境职位上工作，SO，这里有一个codepen - http://codepen.io/anon/pen/ZLmgPw

$(function() { 
 
    var box = $('.box'); 
 
    function setScrolled() { 
 
    box.removeClass('box-NotScrolled'); 
 
    box.addClass('boxScrolled'); 
 
    localStorage.setItem('scrolled',true); 
 
    } 
 
    function removeScrolled() { 
 
    if (box.hasClass('boxScrolled')) { 
 
     box.removeClass('boxScrolled'); 
 
     box.addClass('box-NotScrolled'); 
 
    } 
 
    } 
 
    if (localStorage.getItem('scrolled')) { 
 
    setScrolled(); 
 
    } 
 
    $(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 100) { 
 
     setScrolled(); 
 
    } else { 
 
     removeScrolled(); 
 
    } 
 
    }); 
 
})

.box { 
 
    position: fixed; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.boxScrolled { 
 
    background-color: green; 
 
} 
 
.box-NotScrolled { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div> 
 
<div style="height: 1000px"></div>