Question

当我滚动它时，我尝试做淡出工作但是当我滚动到顶部时，元素被隐藏我使用插件隐藏

JADE

#header
.container
  #content
    h3.post-logo ACHRAF
    h1.post-behind A
    h2.title.animate.fadeInUp Développeur Mobile
    h2.title & Web

JQUERY

         $(window).scroll( function(){

       if($('#header:hidden'))

            $('#header').addClass('animated fadeOut');

        else
          $('#header').addClass('animated fadeInUp'); 


    });

Answer 1

您可以使用以下代码轻松淡出和淡入：

   if($('#header:hidden'))
        $('#header').fadeOut(100);
    else
      $('#header').fadeIn(100);

Answer 2

试试这个（http://jsfiddle.net/2p4x52up/）...

<div id="header"></div>
<div class="content"></div>

... JS

$(window).on("scroll", function(e) {
    if ($(window).scrollTop() >= $("#header").height()) $("#header").fadeOut(500);
    else $("#header").fadeIn(500);
});

... CSS

#header { 
  background: red; 
  height: 100px; 
  left: 0; 
  position: fixed; 
  top: 0; 
  width: 100%; 
}

.content {
  float: left;
  width: 100%;
  height: 2000px;
  background: gray;
}

Scroll上的Jquery元素Fadeout

2 个答案: