问题描述
我希望元素在从页面顶部滚动时淡出,然后在它们回滚到页面上时淡入.我写了一些有效的代码,但我正在寻找更优雅的解决方案.这是我在 jsfiddle 上的解决方案:http://jsfiddle.net/wmmead/JdbhV/3/
我想找到一段更短、更优雅的代码,但无法完全解决.也许有一个数组和 each() 方法?如果我在 div 上放一个类而不是一个 ID,它会变得更短,但它们会同时淡出.我希望每个框在滚动离开页面时淡出.
HTML
<div id="box2"></div><div id="box3"></div><div id="box4"></div><div id="box5"></div><div id="box6"></div>
CSS
#box1, #box2, #box3, #box4, #box5, #box6 {宽度:100px;高度:100px;背景:橙色;边距:100px 自动;}#box6 {底边距:600px;}
jQuery
var box1Top = $('#box1').offset().top;var box2Top = $('#box2').offset().top;var box3Top = $('#box3').offset().top;var box4Top = $('#box4').offset().top;var box5Top = $('#box5').offset().top;var box6Top = $('#box6').offset().top;$(窗口).滚动(功能(){如果 ((box1Top - $(window).scrollTop())
你可以使用属性选择器 '[attr="someattr"]'
和 .each()
jQuery 的方法:
$(window).scroll(function () {$('[id^=box"]').each(function () {//<---循环 div id 以 #box 开头if ((($(this).offset().top - $(window).scrollTop()) < 20) {//<---标记当前对象的$(this).offset().top$(this).stop().fadeTo(100, 0);//<----淡出当前对象} 别的 {$(this).stop().fadeTo('fast', 1);//<----淡入当前对象}});});
您可以在这里进行演示:
演示
I want elements to fade out as they scroll off the top of the page, and then fade back in as they scroll back onto the page. I wrote some code that works, but I am looking for a more elegant solution. Here is the solution I have working on jsfiddle: http://jsfiddle.net/wmmead/JdbhV/3/
I would like to find a much shorter, more elegant piece of code, but just can't quite work it out. Maybe something with an array and the each() method? If I put a class on the divs instead of an ID, it gets a lot shorter, but then they all fade out at once. I want each box to fade out as it scrolls off the page.
HTML
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
CSS
#box1, #box2, #box3, #box4, #box5, #box6 {
width: 100px;
height: 100px;
background: orange;
margin:100px auto;
}
#box6 {
margin-bottom:600px;
}
jQuery
var box1Top = $('#box1').offset().top;
var box2Top = $('#box2').offset().top;
var box3Top = $('#box3').offset().top;
var box4Top = $('#box4').offset().top;
var box5Top = $('#box5').offset().top;
var box6Top = $('#box6').offset().top;
$(window).scroll(function () {
if ((box1Top - $(window).scrollTop()) < 20) {
$('#box1').stop().fadeTo(100, 0);
} else {
$('#box1').stop().fadeTo('fast', 1);
}
if ((box2Top - $(window).scrollTop()) < 20) {
$('#box2').stop().fadeTo(100, 0);
} else {
$('#box2').stop().fadeTo('fast', 1);
}
if ((box3Top - $(window).scrollTop()) < 20) {
$('#box3').stop().fadeTo(100, 0);
} else {
$('#box3').stop().fadeTo('fast', 1);
}
if ((box4Top - $(window).scrollTop()) < 20) {
$('#box4').stop().fadeTo(100, 0);
} else {
$('#box4').stop().fadeTo('fast', 1);
}
if ((box5Top - $(window).scrollTop()) < 20) {
$('#box5').stop().fadeTo(100, 0);
} else {
$('#box5').stop().fadeTo('fast', 1);
}
if ((box6Top - $(window).scrollTop()) < 20) {
$('#box6').stop().fadeTo(100, 0);
} else {
$('#box6').stop().fadeTo('fast', 1);
}
});
You can use attribute selector '[attr="someattr"]'
with use of .each()
method of jQuery:
$(window).scroll(function () {
$('[id^="box"]').each(function () { // <---loop the divs id starts with #box
if (($(this).offset().top - $(window).scrollTop()) < 20) { //<---mark the $(this).offset().top of current object
$(this).stop().fadeTo(100, 0); //<----fadeOut the current obj
} else {
$(this).stop().fadeTo('fast', 1); //<----fadeIn the current obj
}
});
});
You can take a demo here:
DEMO
这篇关于jQuery 在元素滚动离开页面时淡出元素,在它们向回滚动时淡出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!