在网页上是基本的水平导航面板,有相对位置,显示块。当滚动超过150px后,我有javascript代码将他的位置改为固定位置。因此,用户可以看到面板... 现在的问题是。
我怎样才能做出(淡入或滑落)的过渡效果?
这里是fiddle。fiddle
Css:
#navigation-panel {
transition: all 1s linear;
}
Js。
$(window).scroll(function () {
console.log($(window).scrollTop());
if($(window).scrollTop() > 150) {
$('#navigation-panel').css('opacity', 1);
$('#navigation-panel').css('position', 'fixed');
$('#navigation-panel').css('opacity', 0);
} else {
$('#navigation-panel').css('position', 'relative');
}
});
我试图在javascript中设置(在css中是过渡:所有1s;)。
或替代方案,如
但过渡不成功...
有什么建议吗?
这应该可以完成工作。
$(window).scroll(function () {
if($(window).scrollTop() > 150) {
$('#navigation-panel').css('position', 'fixed');
$('#navigation-panel').css('top', 0);
} else {
$('#navigation-panel').css('position', '');
$('#navigation-panel').css('top', '-100%');
}
});
.container {
height: 1000px;
}
#navigation-panel {
transition: all 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navigation-panel">
<ul id="main-menu">
<li>
<a href="#about-us" class="smooth-scroll">About us</a>
</li>
<li>
<a href="#services" class="smooth-scroll">Services</a>
</li>
<li>
<a href="#contact" class="smooth-scroll">Contact</a>
</li>
</ul>
</div>
<div class="container"></div>