如何在滚动页面上的某些点时淡入/淡出div？ [英] How to fade in/out div when scrolling past certain points on a page?

问题描述

当用户滚动到页面中的某一点时，如何淡入/淡出彼此之间的div？我有一个固定的按钮，当用户到达页面上的6个不同点时，我想更改。换句话说，我可以链接到同一按钮的6个不同的东西在页面上的不同点，从上面1000px，然后2000px等。

How would you fade/in out divs that are ontop of each other, when the user scrolls to a certain point in the page? I have a fixed button that I want to change when the user reaches 6 different points on the page. In other words so that I can link to 6 different things from the same button at different points in the page say 1000px from the top, then 2000px and so on.

每个的按钮在其中有不同的单词，所以我只想让每个按钮在下一步后，当滚动到达正确的px数量时，淡入。

Each of the buttons have different words in them so I just want each button to fade in after the next when the correct number of px is reached when scrolling.

html

< div class =buttonOne> button one< / div>
< div class =buttonTwo> button two< / div>
< div class =buttonThree> button three< / div&

css

.buttonOne，.buttonTwo， .button三元{
位置：固定;
margin-top：3em;
}

所有位置固定，彼此重叠。每个应该淡入在100px，200px，300px等等？

All positioned fixed and on top of each other. Each one should fade in at 100px, 200px, 300px and so on?

推荐答案

使用jquery：

$(window).scroll(function(){
if($(window).scrollTop() === 10){
   $('.element').fadeOut();
}
});

小提琴： 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();
        }
    }

双引号中的元素由您设置

Elements in double quotes are up to you to set

示例（对于数字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循环

The for loop is better as it means that you only have to implement one thing everytime you add one which is the condition in the for loop

这篇关于如何在滚动页面上的某些点时淡入/淡出div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！