当滚动浏览页面上的某些点时，如何淡入/淡出div？

当用户滚动到页面中的某个点时，你会如何淡化/输出彼此重叠的div？ 我有一个固定的按钮，当用户到达页面上的6个不同点时我想要更改。 换句话说，我可以从页面中不同点的同一个按钮链接到6个不同的东西，从顶部开始说1000px，然后是2000px，依此类推。

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

HTML

button one

button two

button three

CSS

.buttonOne, .buttonTwo, .buttonThree { position: fixed; margin-top: 3em; }

所有定位都固定在彼此的顶部。 每个应该以100px，200px，300px等为基础淡入？

Answer 1

使用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(); } } 

双引号中的元素由您决定

示例（对于数字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循环中的条件时，您只需要实现一个东西