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

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

＆＃13;

//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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

＆＃34;我整天都在搜索，查看了cookies，本地存储，classie.js。我确信这些解决方案比那些更简单，更简单。＆＃34;

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

由于localStorage无法在沙盒环境中为SO上的帖子工作，因此这是一个代码库 - http://codepen.io/anon/pen/ZLmgPw

＆＃13;

$(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();
    }
  });
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: