Question

我想获得与here非常相似的结果。只有一个区别：向下滚动，向上滚动标题与内容（位置：相对），不要隐藏（向上滑动）它。

我将它复制到jsfiddle.net/Gallex/nmLoykwy/，对css的调整很少。

HTML：

<header class="yapiskan">STICKY HEADER</header>
<div id="lipsum">
 <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus ante augu</p>
</div>

的javascript：

$(function(){   
var cubuk_seviye = $(document).scrollTop();
var header_yuksekligi = $('.yapiskan').outerHeight();
$(window).scroll(function() {
    var kaydirma_cubugu = $(document).scrollTop();
   if (kaydirma_cubugu > header_yuksekligi)   {$('.yapiskan').addClass('gizle');} 
    else {$('.yapiskan').removeClass('gizle');}     
    if (kaydirma_cubugu > cubuk_seviye) {$('.yapiskan').removeClass('sabit');} 
    else {$('.yapiskan').addClass('sabit');}                
    cubuk_seviye = $(document).scrollTop(); 
 });
 });

的CSS：

.yapiskan{
background-color:#e74c3c; 
color:white; 
font-size:24px; 
padding:5px; 
text-align:center; 
position:relative;
left:0; 
top:0; 
width:100%; 
transition: .5s;
}
.gizle {
top: -90px;
}
.sabit {
top:0;
z-index: 9999;
position:fixed;
}

是的，如果我改变了

.gizle {
top: -90px;
}

到顶部：0;它会根据需要执行，但它也会在向上滚动时结束标题向下滑动过渡效果。

Answer 1

用@keyframes解决了它：

.sabit {
top:0;
z-index: 9999;
position:fixed;
-webkit-animation: fadeInDown 0.5s ease;
animation: fadeInDown 0.5s ease;
}

@-webkit-keyframes fadeInDown {
0%   {-webkit-transform: translateY(-100%);}
100% {-webkit-transform: translateY(0);}
} 

@keyframes fadeInDown {
0%   {-ms-transform: translateY(-100%); transform: translateY(-100%);}
100% {-ms-transform: translateY(0); transform: translateY(0);}
}

最终结果：jsfiddle.net/Gallex/nmLoykwy/

或者你知道更好的解决方案吗？

向上滚动时粘滞的标题（向下滑动）

1 个答案: