jquery - 在 div 中为幻灯片添加删除类

Question

我有一个标题有 2 个位置 1 绝对和固定当你滚动我需要标题顺利滑入并且当你滚动回顶部时它会滑出..我无法让它滑动它只是显示出来滚动时退出。

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 300) {				
		   		$('.header').addClass('fixed');
	           } else { 
				$('.header').removeClass('fixed');
            }
        });
    });
})(jQuery);

.header { 
  position: absolute;	
  width:100%; 
  height:86px;  
  background:  red;
  color: #fff;
}
.header.fixed { 
  width:100%; 
  height:66px; 
  position:fixed;
  top:0px;
  background:#000;
  color: #fff;
  -moz-transform: translateY(-130px);
  -ms-transform: translateY(-130px);
  -webkit-transform: translateY(-130px);
   transform: translateY(-130px);
   transition: transform .5s ease;
}
.header.fixed {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="header">
  <span>My Div</span>
  </div>
  <div style="height: 2000px; background-color: grey;">Content</div>

Answer 1

在我开始解决之前，最好使用 left: 0, right: 0 使绝对元素 100% width 而不是 width: 100% 。

将 .fixed 上的样式更改为:

.header.fixed {
  position: fixed;
  // absolute 100% width
  left: 0;
  right: 0;
  height:66px;
  background:#000;
  color: #fff;
  // the slide animation when fixed class appears
  animation: headerSlideIn 0.5s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
} 

// the slide in animation
@keyframes headerSlideIn {
  0% {
    // make it start -66px which is away from your screen
    top:-66px;
  }

  100% {
    // the key to your animation
    top: 0;
  }
}

因此它会给你想要的结果。如果您不喜欢 top 实现，因为它在移动设备上的不稳定行为，只需将其替换为 transform: translateY() 并使其成为 top: 0 .

另外，旧代码不起作用的原因是:

// you overwritten your style above with 0 which simply doesn't do anything
.header.fixed {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

希望对您有所帮助。

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){
            if ($(this).scrollTop() > 300)
            {
              $('.header').removeClass('slide-back');
		   		    $('.header').addClass('fixed');
	          }
            else if ($(this).scrollTop() == 0)
            {
				      $('.header').removeClass('fixed');
            }
        });
    });
})(jQuery);

.header { 
  position: absolute;
  left: 0;
  right: 0;
  height:86px;
  background:  red;
  color: #fff;
  transition: all 0.5s ease;
}

.header.fixed {
  position: fixed;
  height: 66px;
  background: #000;
  color: #fff;
  animation: headerSlideIn 0.5s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes headerSlideIn {
  0% {
    top:-66px;
  }
  
  100% {
    top: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="header">
  <span>My Div</span>
  </div>
  <div style="height: 2000px; background-color: grey;">Content</div>