[英]Position relative to fixed - how to slide down?
我已经设置好菜单,一切准备就绪,而我现在拥有的JS的页面没有遍历整个页面,这很好。 我遇到的问题是使“固定”导航向上/向下滑动,而不是突然出现。
目前,我拥有的jQuery正在激活屏幕下方大约300px〜的类,该类将菜单位置从相对更改为固定。
请注意:我最初设法通过静态定位实现此功能,但是在我的网站上使用z-index和其他元素时遇到了麻烦,因此我希望定位保持相对(非静态)。 我也不想用javascript以任何方式复制菜单(已经看到了一些这样做的示例)。
当菜单位置更改为固定时,如何使用jquery或css同时实现Slidedown和Slideup效果?
我的下面的代码,非常感谢。
HTML:
<div class="nt-main-navigation-sticky">
<!-- my nav, logo, etc, is in here. -->
</div>
CSS:
.nt-main-navigation-sticky {
position: relative;
}
.activeScroll .nt-main-navigation-sticky {
position: fixed;
top: 0;
left: 0;
}
JQUERY:
// get my header height
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight();
// add/remove body class
$(window).scroll(function() {
if($(window).scrollTop() > getHeaderHeight + 200) {
$('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
} else {
$('body').removeClass('activeScroll').css('padding-top', 0);
}
});
向您的CSS添加过渡:
.nt-main-navigation-sticky {
position: relative;
}
.activeScroll .nt-main-navigation-sticky {
position: fixed;
top: -50px; // or whatever the height of the navbar
left: 0;
transition: top 600ms;
}
和js:
if($(window).scrollTop() > getHeaderHeight + 200) {
$('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
$('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition
} else {
$('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition
$('body').removeClass('activeScroll').css('padding-top', 0);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.