How Can I Make A Div Disappear When Scrolling Down 100px From The Top?

I want to make a div disappear when I scroll down 100px and then reappear when within those 100px again from the top of the browser window. I don't want any animations just want it

Solution 1:

You wont be able to do this in pure HTML or CSS, you'll need to resort to Javascript, your best bet is likely jQuery- as such it can be relatively easy to do this using:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 100) {
         $('#myDivId').hide();
     }
     else {
         $('#myDivId').show();
     }
});

Solution 2:

To the best of my knowledge, I don't think that is easily possible. You can embed JavaScript code to your page using the script tag.

This is how I do mine. It's purely JavaScript and does not depend on JQuery.

I'm sure there is a better way, but this works and is intuitive, it's super easy to understand even for beginners.

It adds or removes a class to an element once the user scrolls past 100px from the top. This value of course can be changed.

const main_nav = document.getElementById('main-nav');

window.addEventListener("scroll", () => {
    var y = window.scrollY;
    if (y >= 100){
        main_nav.classList.add('disappear');
        return;
    }
    else{
        main_nav.classList.remove('disappear');
        // note that this is a class defined in your CSS.
    }
});