1
如何將標題內容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;
\t border-bottom: 1px solid black;
font-size: 48px;
\t height: 200px;
\t 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>
移動iOS上的標題不會在屏幕頂部向下滑動/向上的sroll和顫動,這是一個錯誤,由於你正在談論的scrollTop的問題?我可以用什麼不同的方法來實現我在找的東西? //jsfiddle.net/or0aL04q感謝您的幫助! – Jenny