Javascript 如何使DIV在滚动时消失，并在滚动回页面顶部时显示

我需要创建一个学校项目的网站。没有什么特别的，但我想包括一些不错的效果。 我想在向下滚动时使“#boxje”消失，但在返回顶部时重新出现。我曾尝试用Javascript来实现它，但我只能在x秒后让它消失

<div id="boxje" class="col-md-4 col-md-offset-4 inner col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
    <div class="text-box">
        <p class="intro">Welkom</p>
        <h2><img src="images/van-hool-logo.png" height="60px" ></h2>
        <p>Van Hool uit België bouwt jaarlijks tot 1400 bussen en autocars en zo’n 4000 industriële voertuigen waarvan het 80% wereldwijd exporteert. 
          Met meer dan 4000 werknemers en een compleet gamma autocars en bussen is Van Hool een belangrijke busbouwer in Europa.Daarnaast bouwt Van 
          Hool ook een zeer uitgebreid gamma opleggers en tankcontainers. Van Hool is in deze sector onbetwist marktleider in België en bekleedt een 
          belangrijke plaats op verschillende exportmarkten.<br>

          Al meer dan 65 jaar is Van Hool gerenommeerd voor het ontwerpen en bouwen van op maat gemaakte hoogtechnologische kwaliteitsproducten.</p>
         <br>
         <br>
     </div>
</div>

韦尔科姆

凡·胡尔·尤特·贝尔吉·布瓦特·贾利克斯的汽车总产量为1400辆，其中4000辆汽车的80%出口。
在欧洲的布森是一家汽车制造厂，也是一家汽车制造厂
用罐装容器装的雨伞。范胡尔在贝尔吉安贝克莱德的贝特维斯特马克莱德的德泽区
比兰格里克广场与奇伦德出口广场。

Al-meer和65岁的jaar是一位来自世界各地的技术专家

我在菜单上做了类似的事情：在标题上有一个背景，当你滚动时会出现

当您有滚动300px时，jquery将添加一个类

CSS:

Javascript:

$window = $(window);
$(window).scroll(function(){

if($window.scrollTop() > 300)
    $("#header").addClass('active');
else    
    $("#header").removeClass('active');
});

$window = $(window);
$(window).scroll(function(){

if($window.scrollTop() > 300)
    $("#boxje").removeClass('active');
else    
    $("#boxje").addClass('active');
});

只要在添加或删除类时反转，您就会很好：）

这应该起作用：

 #boxje{
        background: rgba(1,90,156,0);
        moz-transition: all 1s ease-in-out;
        o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        webkit-transition: all 1s ease-in-out;
    }
    #boxje.active{
        background: rgba(1,90,156,0.8);
    } 

Javascript:

$window = $(window);
$(window).scroll(function(){

if($window.scrollTop() > 300)
    $("#header").addClass('active');
else    
    $("#header").removeClass('active');
});

$window = $(window);
$(window).scroll(function(){

if($window.scrollTop() > 300)
    $("#boxje").removeClass('active');
else    
    $("#boxje").addClass('active');
});

说明：

从google cdn将jquery包含到您的项目中，或下载到Office，包括：

将我的JQUERY代码添加到一些file.js

在html/php文件中也导入此文件

在我的代码中使用“value=160”来满足您的偏好

---

显示您的js代码。您需要document.body.scrollTop这将为您提供屏幕的垂直位置。在这里，您可以使用jQuery，因为@GtAntoine建议使用函数descosearbox（）{document.getElementById（“boxje”）.style.visibility=“hidden”}setInterval（函数（）{descosearbox（）；}，5000）；