Question

我有一个元素，当用户滚动经过网页上的某个部分时，该元素会更改颜色，除非用户已经滚动通过了该部分，然后刷新了页面，否则所有元素都可以正常工作。

刷新页面时，页面保留在其最后位置，但元素颜色恢复为其原始CSS颜色。

例如

第一部分的背景为黑色-需要将相关元素设置为白色
滚动通过的第一部分时，需要将元素更改为灰色
如果用户重新加载页面（滚动到第一部分之后），则该元素将恢复为白色。这不是很好，因为第一部分之后的所有部分都具有白色背景，因此需要将元素设置为灰色

从本质上讲，我正在寻找一种方法，一旦页面刷新，JavaScript / JQuery是否可以识别元素所针对的部分，然后相应地添加正确的CSS属性。

这是我当前拥有的代码：

var targetOffset = $("#firstSection").offset().top;

  var $w = $(window).scroll(function() {
    if ($w.scrollTop() >= targetOffset) {
      $(".element").css({ color: "#636C72" });
    } else {
      $(".element").css({ color: "white" });
      return false;
    }
  });

Answer 1

在定义滚动时只需触发滚动即可运行逻辑。

var $w = $(window).scroll(function() { }).scroll()

或使用触发器

var $w = $(window).scroll(function() { }).trigger('scroll')

或使其成为功能

var scrollFnc = function () {}
var $w = $(window).scroll(scrollFnc)
scrollFnc()

需要元素以在刷新页面时标识它在页面上的位置

1 个答案: