从顶部向下滚动 100px 时，如何使 div 消失？答案

【问题标题】：How can I make a div disappear when scrolling down 100px from the top?从顶部向下滚动 100px 时，如何使 div 消失？
【发布时间】：2013-12-17 11:30:17
【问题描述】：

我想让一个 div 在我向下滚动 100 像素时消失，然后在浏览器窗口顶部再次出现在 100 像素内时重新出现。我不希望任何动画只是希望它消失并重新出现。这可以仅在 HTML 和 CSS 中完成吗？有人可以给我这个代码吗？

提前致谢，马特

【问题讨论】：

我认为没有 jquery/javascript 是不可能的

标签： html css scroll

【解决方案1】：

你不能在纯 HTML 或 CSS 中做到这一点，你需要求助于 Javascript，你最好的选择可能是 jQuery——因此使用它可以相对容易地做到这一点：

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

【讨论】：

不适合我，但这有效：codepen.io/nickcil/pen/sfutl

【解决方案2】：

据我所知，我认为这并不容易。您可以使用 script 标签将 JavaScript 代码嵌入到您的页面中。

这就是我的工作方式。它是纯 JavaScript，不依赖于 JQuery。

我确信有更好的方法，但这种方法有效且直观，即使对于初学者来说也非常容易理解。

一旦用户从顶部滚动超过 100 像素，它就会向元素添加或删除一个类。这个值当然可以改变。

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.
    }
});

【讨论】：