Reduce height of div on scroll
Question
I have an introduction div that calculates the browser window height and fills the screen and then the user can scroll down to the main page content below.
<body>
<div id="intro"></div>
<div id="main"></div>
</body>
I'm using the following JS to calculate the window height and attach it to the intro div:
resizeWindow();
$(window).resize(resizeWindow);
function resizeWindow() {
var ww = $(window).width();
var bh = $(document).height();
var wh = $(window).height();
featureHeight = wh - 0;
$('#intro').css({'height':featureHeight+'px'});
}
What I'm attempting to do is to reduce the height of the intro div as the page scrolls and once the height reaches 0 and the user has reached the main div content, I can remove it so the user can no longer scroll back up to it.
Any help would be greatly appreciated.
1 answers
solution1
0 2014-09-09 01:51:15
var $intro = $('#intro');
$('#container').scroll(function(){
$intro.height($intro.height() + $intro.offset().top);
$(document).scrollTop();
if ($intro.height() <= 0) {
$intro.remove();
}
});
You essentially remove height from #intro until it reaches zero. It's a little reliant on the page being equal/smaller than the intro element itself, though.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.