監聽 scrollTop 超過一定高度則做動作,但是else後該div區塊消失不見

<div class="header_container_for_full_cover">
 
</div>
$(window).scroll(function() {
  if ( $(this).scrollTop() > 400){
    $('.header_container_for_full_cover').fadeIn().css('background-color', 'rgba(0,0,0,.7)');
  } else {
    $('.header_container_for_full_cover').fadeOut().css('background-color', 'transparent');
  }
});

好怪
我想在 header_container_for_full_cover 加入背景顏色
當小於四百後則把顏色變為透明
但是我這樣寫,當小於四百後我的div就整個消失
然後檢查才知道是fadeOut()的問題
但我想讓他有fade的效果,那我要怎麼寫才不會消失?(當高度小於四百後。。。)


更新

.background-off {
  animation: backgroundOff;
  -webkit-animation: backgroundOff;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes backgroundOff {
  from {
    background: rgba(0,0,0,0.8);
  }

  to {
    background: transparent;
  }
}

$(window).scroll(function(){
  if($(this).scrollTop() > 350){
    $('.header_container_for_full_cover').addClass('background-off');
  }else{
    $('.header_container_for_full_cover').removeClass('background-off');
  }
});

我的語法是這樣
但是他不會像我要的那樣運行

阅读 1.1k
评论
    4 个回答

    执行顺序应该调整下 先改变背景色再执行淡出动画
    你现在这个是先执行淡出再执行修改背景色
    修改为:
    $('.header_container_for_full_cover').css('background-color', 'transparent').fadeOut();


    保留Div 修改为
    css 添加
    .background-off {

    animation: backgroundOff  0.5s forwards;
    -webkit-animation: backgroundOff 0.5s forwards;

    }

    @keyframes backgroundOff {

    from {background: rgba(0,0,0,.8);}
    to {background: transparent;}

    }
    js添加

    $(selector).addClass("background-off");


    css再添加淡入背景动画

    .background-on {
        animation: backgroundOn  0.5s forwards;
        -webkit-animation: backgroundOn 0.5s forwards;
    }
            
    @keyframes backgroundOn {
        from {background: transparent;}
        to {background: rgba(0,0,0,.8);}
    }

    js写法为

    if($(this).scrollTop() > 350){
       $('.header_container_for_full_cover').removeClass('background-off');
       $('.header_container_for_full_cover').addClass('background-on');
    }else{
       $('.header_container_for_full_cover').removeClass('background-on');
       $('.header_container_for_full_cover').addClass('background-off');
    }

      简单的过渡动画效果
      css3 transition 就行了呗

        transition最好实现 如果要用jquery方法 可以使用 jquery的animate() 方法,详细指定你要变化的属性,

          如果不用css3的话可以使用setInterval模拟动画实现:

          function changeBackOpacity(showOrHide){
              let [n,per,limit] = [];
              if(showOrHide === "show"){
                  [n,per,limit] = [0,3,102];
              }else{
                  [n,per,limit] = [99,-3,-3];
              }
              let t = setInterval(() => {
                  if(n<10){
                      $(".backgroundTest").css("background",`rgba(0, 0, 0, 0.0${n})`);
                  }else{
                      $(".backgroundTest").css("background",`rgba(0, 0, 0, 0.${n})`);
                  }
                  n = n + per;
                  // console.log(n)
                  if(n == limit){
                      clearInterval(t);
                  }
              },50)
          }
          
          let timer = null,
              isHidden = false;
          window.onscroll = (event) => {
              if(timer){
                  clearTimeout(timer);
                  timer = null;
              }
              timer = setTimeout(() => {
                  let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
                  if(realHeight > 100 && !isHidden) {
                      changeBackOpacity("hide");
                      isHidden = true;
                  }else if(realHeight <= 100 && isHidden){
                      changeBackOpacity("show");
                      isHidden = false;
                  }
              },300);
          }
            撰写回答

            登录后参与交流、获取后续更新提醒