Question

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

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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>

为div中的幻灯片添加移除类

1 个答案: