Question

我看到了这个主题：Change CSS element with JQuery when scroll reaches an anchor point

但它不能与我的全屏幻灯片一起使用。

HTML

<body> 
      <div id="slide1"></div>
      <div id="slide2"></div>
      <div id="slide3"></div> 
</body>

CSS

#slide1, #slide2, #slide3 { height:100%; width: 100%; }

Answer 1

这应该为你做，https://jsfiddle.net/ezj1Lfbw/6/

HTML

<body> 
      <div id="slide1"></div>
      <div id="slide2"></div>
      <div id="slide3"></div>
      <a id="trigger">trigger here</a>
</body>

JQuery的

<script>
var t = $("#trigger").offset().top;

$(document).scroll(function () {
    if ($(window).height() + $(this).scrollTop() > t) {
                $("body").addClass("red");
    }
});
</script>

CSS

#slide1, #slide2, #slide3 { height:100vh; width: 80%; margin-left: 10%;}
#slide1{background: lightblue;}
#slide2{background: lightpink;}
#slide3{background: lightgreen;}
.red{background: red;}

使用Jquery滚动到达锚点时更改正文的CSS

1 个答案: