Question

如何将标题内容txt颜色从白色（面板1内）转换为黑色（阶段2-22）。我在jquery中应用了css类但是在向上滚动时，header-content 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并没有做任何事情，因为他们没有位置：规则。

其次，scrollTop不接受参数。

第三，当你向后滚动这个位时：

`

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

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

https://jsfiddle.net/dd2marmu/

滚动导航过渡

1 个答案: