问题
I'm stuck with this, hope any of you can help me out.
I have this HTML:
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<body>
With this CSS:
#one, #two, #three {
width: 100%;
height: auto;
}
And this jQuery:
$(window).scroll(function(){
var y = $(window).scrollTop();
var one = $('#one').height();
var two = $('#two').scrollTop();
var three = $('#three').scrollTop();
var pos_one = 310;
var pos_two = 454;
var pos_three = 596;
if( y > one ){
$("#header").fadeIn(200);
} else {
$('#header').fadeOut(200);
}
if( (y > one) && (y < two) ) {
$('.bubble').animate({
"left" : pos_two + "px"
}, 300);
}
if( (y > two) && (y < three) ) {
$('.bubble').animate({
"left" : pos_three + "px"
}, 300);
}
});
So, #header is fading in when I reach #two, that's working. The problem I have is that .bubble div is not moving when I reach the other sections while scrolling.
What am I doing wrong? Any help would be much appreciated!
回答1:
simply use overflow property
just include overflow:hidden within your css something like this....
#one, #two, #three {
width: 100%;
height: auto;
overflow:hidden;
}
you can use property value as per your need. here is the reference link overflow property link
Let me know it will help you or not ???
来源：https://stackoverflow.com/questions/12990191/div-position-change-while-scrolling-down-using-scrolltop-jquery