On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disappears from view, the user is then scrolled down instead of being at the top of the page again.
I want the user to be able to scroll past the div (making it off-screen) and then stay in the same position on the page, rather than being pushed down after the div is hidden.
fiddle: https://jsfiddle.net/c60cw8r1/
In the fiddle example, it should keep you at Wrap1 when scrolling down, not by Wrap2.
HTML:
<div id="slideDown" style="position: relative; display: none;">
<a class="howClose" href="#">
<span class="screenReader">
Close How It Works
</span>
×
</a>
</div>
<div id="grabPromo" style="text-align: center;"><a href="#">How It Works</a></div>
<div class="site-wrapper">
Wrap1
</div>
<div class="site-wrapper">
Wrap2
</div>
CSS:
#slideDown {
background:#ace;
display: none;
clear: both;
height: 600px;
top: 0px;
z-index: 1000;
}
.howClose {
color: #007a87;
position: absolute;
right: 25px;
top: 25px;
opacity: 0.6;
}
.screenReader {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
font-size: 25px;
width: 1px;
}
.site-wrapper {
height: 600px;
}
JS:
$('#grabPromo').click(function(e){
$('.site-wrapper').before( $('#slideDown') );
$('#slideDown').slideToggle();
});
$('#closePromo').click(function(e){
$('#slideDown').slideUp();
});
$('.howClose').click(function(e){
$('#slideDown').slideUp();
});
var closeTop = $('.site-wrapper').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > 580) {
if ($('#slideDown').css('display') != 'none') {
$('#slideDown').hide();
}
else {
}
}
});