1
我有我的菜单,所有设置,很好去,和我目前的JS没有页面跳到各地都很好。我遇到的问题是让我的“固定”导航向上/向下滑动,而不是从无处出现。相对于固定的位置 - 如何向下滑动?
目前,我有jQuery是激活一个类约300px~下屏幕,这将菜单的位置从相对固定。
请注意:我最初设法使用静态定位工作,但在我的网站上使用z-index和其他一些元素很困难,所以我希望定位保持相对(而不是静态) 。我也不想用javascript以任何方式复制菜单(已经看过一些例子)。
当菜单位置更改为固定时,如何使用jquery或css实现滑动和滑动效果?
我的代码如下,非常感谢。
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);
}
});