gpt4 book ai didi

javascript - 滚动时如何更改 div 上的标题?

转载 作者:行者123 更新时间:2023-11-28 01:46:12 25 4
gpt4 key购买 nike

我将创建一个黑白背景的网站。当背景为黑色时,我希望将标题替换为 translateY。我想在过渡区慢慢改变。我该怎么做?

function headerEffect() {
var win = $(window).scrollTop();
var blackspace = $('.black').offset().top;
var headw = $('.logo-white');
var headb = $('.logo-black');
var where = window.pageYOffset || document.documentElement.scrollTop;

if (win > blackspace) {
headw.css({
'transform': 'translateY(' + (win - blackspace - 42) + 'px' + ')'
});
}
}

headerEffect();
$(window).scroll(headerEffect);
header {
position: fixed;
font-size: 30px;
font-weight: bold;
}

header .logo-white {
color: #fff;
}

header .logo-black {
color: #000;
}

.black {
background: #000;
height: 300px;
width: 100%;
}

.white {
background: #fff;
height: 300px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
<div class="logo-black">LOGO</div>
<div class="logo-white">LOGO</div>
</header>

<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>

https://jsfiddle.net/br1fmhou/

最佳答案

我编写 console.log('123') 以确保您在 black div 中滚动

function headerEffect() {
var win = $(window).scrollTop();
var blackspace = $('.black').offset().top;
var headw = $('.logo-white');
var headb = $('.logo-black');
var where = window.pageYOffset || document.documentElement.scrollTop;
$('.black').each(function() {
if (win >= ($(this).offset().top - 10) &&
win <= ($(this).offset().top + $(this).height())) {
console.log('123');
headw.css({
'transform': 'translateY('+( win - blackspace - 42) + 'px' +')'
});
}
})

}

https://jsfiddle.net/br1fmhou/2/

关于javascript - 滚动时如何更改 div 上的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50170599/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com