当用户滚动到页面中的某个点时,您如何淡出/淡出彼此重叠的 div?我有一个固定按钮,当用户到达页面上的 6 个不同点时,我想更改它。换句话说,我可以从页面不同位置的同一个按钮链接到 6 个不同的东西,比如从顶部开始 1000 像素,然后是 2000 像素等等。
每个按钮中都有不同的单词,所以我只想在滚动时达到正确的像素数时,每个按钮都在下一个按钮之后淡入。
html
<div class="buttonOne">button one</div>
<div class="buttonTwo">button two</div>
<div class="buttonThree">button three</div>
CSS
.buttonOne, .buttonTwo, .buttonThree {
position: fixed;
margin-top: 3em;
}
所有位置固定且彼此重叠。每一个都应该以 100px、200px、300px 等淡入吗?
最佳答案
使用jquery:
$(window).scroll(function(){
if($(window).scrollTop() === 10){
$('.element').fadeOut();
}
});
fiddle :http://jsfiddle.net/Hive7/vV7Wd/2/
添加更多用途:
if ($(window).scrollTop() >= "number of pixels") {
if ($('"button plus number"').css('display') === 'none') {
$('"button plus number"').fadeIn('slow');
$('"button plus number"').prev().fadeOut();
$('"button plus number"').next().fadeOut();
}
}
双引号内的元素由你设置
示例(数字 4):
if ($(window).scrollTop() >= 400) {
if ($('button4').css('display') === 'none') {
$('button4').fadeIn('slow');
$('button4').prev().fadeOut();
$('button4').next().fadeOut();
}
}
或者使用 for 循环:
$(window).scroll(function () {
for (i = 0; i <= 20; i++) {
if ($(window).scrollTop() >= (i * 100)) {
if ($(window).scrollTop() <= ((i * 100) + 100)) {
$('.button' + i).fadeIn('slow');
$('.button' + i).prev().fadeOut();
$('.button' + i).next().fadeOut();
}
}
}
});
for 循环更好,因为它意味着每次添加一个条件时只需执行一件事,这是 for 循环中的条件
关于javascript - 滚动经过页面上的某些点时如何淡入/淡出 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17722245/