在我的项目中,我想淡化html中的div,我使用以下代码
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});#container {
height:2000px;
}
#container div {
margin:50px;
padding:50px;
background-color:lightgreen;
}
.hideme {
opacity:0;
}
Hello
Hello
Hello
Hello
Hello
Hello
Fade In
Fade In
Fade In
Fade In
Fade In
这可以在这个JS Fiddle中找到在 项目中我也使用javascript代码
$(document).ready(function() {
$('#fullpage').fullpage();
});
这基本上使滚动更好,详情请访问https://github.com/alvarotrigo/fullPage.js/
问题:由于整个页面代码,函数中的淡入不会进入滚动if条件.
我想你正在寻找像这样的JS Fiddle 1
JS:
//initialize
var winHeight = $(window).height(),
sections = $('.sections'),
currentSlide = 0;
$('html, body').animate({scrollTop: 0}, 0);
//hide elements not in the view as the page load for the first time
sections.each(function() {
if ($(this).offset().top > winHeight - 5) {
$(this).fadeOut(0);
}
});
//show elements on scroll
$(window).scroll(function(event) {
// retrieve the window scroll position, and fade in the 2nd next section
// that its offset top value is less than the scroll
scrollPos = $(window).scrollTop();
if (scrollPos >= currentSlide * winHeight) {
nextSlide = currentSlide + 2;
$('#sec-' + nextSlide).fadeIn();
// as long as current slide is still in range of the number of sections
// we increase it by one.
if (currentSlide <= sections.length) {
currentSlide++;
}
}
});
更新:
在由OP评论" 我想要段内的div淡出在滚动不是单元DIV,但它里面,因为有多种的那些 ",所有我们需要做的就是这一行改变$(this).fadeOut(0);这个$(this).children().fadeOut(0);,然后这条线:
$('#sec-' + nextSlide).fadeIn(); 对此 $('#sec-' + nextSlide).children().fadeIn(1500);
而现在,我们正在淡出和淡出该部分的所有孩子,而不是该部分本身.
JS小提琴2
京公网安备 11010802040832号 | 京ICP备19059560号-6 