Bloc scroll top after scroll 100vh

Question

I have a homepage with a 100vh div at the top, and I would like to hide it when you scroll down after this div. Or disable the posibility to scroll up after scrolling this 100vh div. This div should only appear once when you arrived on the website.

Here the link : http://tmp.thomasdesnoyers.com/ After the big coloured background div you shloudn't be able to scroll up.

I tried to add a 'display:none' proprety to this div after scrolling the height of the window but it has the effect of take all the content up... If anybody have any clues on this…

This the div to hide :

<div id="home-background" class="monobg">


<?php $images_toomany = array("/wp-content/img/toomany.svg", "/wp-
content/img/toomany_2.svg", "/wp-content/img/toomany_3.svg", "/wp-
content/img/toomany_4.svg", "/wp-content/img/toomany_5.svg");?>
<?php echo '<img src="'.$images_toomany[array_rand($images_toomany)].'" 
class="toomany" />';?>

<?php $images_pictures = array("/wp-content/img/pictures.svg", "/wp-
content/img/pictures_2.svg", "/wp-content/img/pictures_3.svg", "/wp-
content/img/pictures_4.svg", "/wp-content/img/pictures_5.svg",);?>
<?php echo '<img src="'.$images_pictures[array_rand($images_pictures)].'" 
class="pictures" />';?>


</div>

Thank you.

Thomas

Answer 1

Yes. Super simple. Just add overflow:hidden to your body element when you want to prevent scrolling beyond the current viewport. You can do this dynamically via JS or jQuery.

Answer 2

Try this

$(window).scroll(function() {

    var div_height = $('#home-background').height();    
    var page_scroll = $(window).scrollTop();

    if(page_scroll > div_height) {
        $('#home-background').css('display', 'none');
    }
});

Answer 3

here my code with the overflow technic. I think it's a good start :

jQuery(function($) {

var $nav = $('body');
var $win = $(window);
var winH = $win.height(); // Get the window height.

$win.on("scroll", function () {
    if ($(this).scrollTop() > winH ) {
        $nav.addClass("hide");
    } 
}).on("resize", function(){ // If the user resizes the window
   winH = $(this).height(); // you'll need the new height value
});

});