Question

我想在（灰色）部分滚动结束后向标题添加一个类。当（灰色）部分在向上滚动时重新启用时删除相同的类。 https://jsfiddle.net/tgLybw2e/1/

dgemm

Answer 1

您可以使用window.scrollY函数和window.onscroll = function() { var header = document.getElementById('header'); if (window.scrollY > 630) { header.classList.add('updated-class'); } else { header.classList.remove('updated-class'); } }来检测屏幕何时滚动到灰色元素的底部，然后添加一个类。

通过使用JS获取灰色元素的高度，可以使其更加动态，因此不需要将其硬编码为与CSS中设置的值相同的值。

header{
  height: 70px;
  border-bottom: 1px solid #000;
  position: fixed;
  color: #fff;
  left:0;
  right:0;
  text-align:center;
}
header.changeColor{
  color: 000;
}
section{
  height: 700px;
  background: #cdcdcd;
}
section + section{
  background: #fff;
}
.red{
  background:red;
}

.updated-class {
  background-color: red;  
  transition: background 1s linear;
}

<header id="header">
abcfdff
</header>
<section>

</section>
<section>

</section>
<section class="red">

</section>

var variant1 : CustomButton!
var variant2 : CustomButton!
var variant3 : CustomButton!
var variant4 : CustomButton!

Answer 2

试试这个，

$(window).scroll(function(event){
    if (window.scrollY > 700) {
        $('header').addClass('changeColor');
    }else
        $('header').removeClass('changeColor');
});

jsFiddle也一样 https://jsfiddle.net/tgLybw2e/2/

Answer 3

第一步在窗口加载时将标题添加到标题＆amp;计算灰色部分的高度第2步在事件窗口滚动计数窗口的滚动Y

第3步创建函数来比较灰度=窗口滚动Y，当它为true时，从标题中删除类。

滚动灰色部分后更改标题背景和字体颜色

3 个答案: