javascript - 滚动导航过渡

Question

如何将标题内容 txt 颜色从白色(面板 1 内)转换为黑色(阶段 2-22)。我已经在 jquery 中应用了 css 类，但向上滚动时，标题内容 txt 颜色在面板 1 中仍然显示黑色，而它应该是白色

var lastScrollTop = 0;
$(window).scrollTop(0);

$(window).on('scroll', function() {
    var header = $('header');
    var content = $('content');
    var headerBg = $('.header-bg');
    var scrollTop = $(window).scrollTop();
    var dynHeaderVisible = false;
  
    
  // up scroll
  if (scrollTop <= 400) {
    headerBg.css("height", 0);
    header.removeClass("header-content");
    header.addClass('header-white');
  } else {
    headerBg.css("height", 80)
    header.addClass('header-black');
  }
    
    lastScrollTop = scrollTop;
});

$.fn.isOnScreen = function(){
    var element = this.get(0);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: block;
  position: fixed;
  height: 80px;
  width: 100%;
}

header ul {
  z-index: 20;
}

.header-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.header-bg,
.header-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.header-bg {
  z-index: 100;
  color: gray;
  background-color: white;
  border-bottom: 1px solid black;
  transition: .3s height;
  height: 0;
}

.header-content {
  z-index: 200;
  transition: .3s color;
  background-color: transparent;
  height: 80px;
}

.header-white{
   z-index: 200;
  transition: .3s color;
  background-color: transparent;
  height: 80px;
  color: white;
}

.header-black{
  color: black;
}

content {
  display: block;
  height: 2000px;
  background-color: orange;
}

.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: white;
	border-bottom: 1px solid black;
    font-size: 48px;
	height: 200px;
	width: 100%;
}

.stage-0 {
    background: grey;
    height: 400px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header>
  <div class="header-wrapper">
    <div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li>YOUR HEADER</li>
      </ul>
    </div>
  </div>
</header>
<content>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>

Answer 1

嗯，我注意到的第一件事是这些元素上的 z-index 没有执行任何操作，因为它们没有position: 规则。

其次，scrollTop 不接受参数。

第三，当您向上滚动到此位时:

`

if (scrollTop <= 400) {
    headerBg.css("height", 0);
    headerCnt.css('color', 'white');
  }

添加回白色的更改。代码需要稍微清理一下，但我会把它留给你。有一些不必要的重复发生。这是我为其制作的 JSFiddle。

https://jsfiddle.net/dd2marmu/