我有一个标题有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>
&#13;
答案 0 :(得分: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>