Question

我需要为学校项目创建一个网站。没有什么特别的，但我想包括一些不错的效果。我想制作＆＃39;＃boxje＆＃39;当你向下滚动时消失，但当你回到顶部时重新出现。我已尝试使用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>

Answer 1

我在菜单上做了类似的事情：www.procapital.fr在滚动时出现的标题背景。

当你滚动300px时，jquery会添加一个类。

CSS：

 #header{
        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;
    }
    #header.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');
});

当您添加或删除课程时，只需反转，您就会很好：）

这应该有效：

 #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)
    $("#boxje").removeClass('active');
else    
    $("#boxje").addClass('active');
});

Answer 2

$(window).scroll(function(){
  var boxje = $("#boxje").offset().top;
  var value = 160;
    if (boxje>value) {
      $("#boxje").css({"display":"none"});
    } else {
      $("#boxje").css({"display":"initial"});
    }
});

指示：

从谷歌cdn包含jquery到你的项目或下载offilne包括：

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
将我的JQUERY CODE添加到某个file.js
在html / php文件中导入此文件
在我的代码中使用“value = 160”以符合您的偏好。

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

2 个答案: