代码控制我的导航。滚动300px时在屏幕上转换。滚动向上滚动屏幕(滚动内容<300px)
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('nav').addClass('stick');
$('nav').css('top', '0');
}
if ($(window).scrollTop() < 300) {
$('nav').removeClass('stick');
$('nav').css('top', '100%'); // my suggestion but doesn't work
}
});
});
header {
min-height: 100px;
width: 100%;
}
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: inherit;
-webkit-transition: top 0.75s ease;
-moz-transition: top 0.75s ease;
-ms-transition: top 0.75s ease;
-o-transition: top 0.75s ease;
transition: top 0.75s ease;
}
nav.stick {
position: fixed;
min-height: 100px;
top: -100%;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="s-nav">
...
</nav>
</header>
我需要它来启动屏幕外并仅在滚动时> gtpp(当应用.stick类时)向下转换。代码有效,但是当我向上滚动时(当删除.stick类时)导航仍然在屏幕外。
答案 0 :(得分:0)
如果我正确地理解你,你想让元素回到原来的位置,那么它是从右边开始的吗?如果是这样;试试下面的调整;
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('nav').addClass('stick');
$('nav').css('top', '0');
}
if ($(window).scrollTop() < 300) {
$('nav').removeClass('stick');
$('nav').css('top', '0'); // try this.
}
});
});
&#13;
header {
min-height: 100px;
width: 100%;
}
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: inherit;
-webkit-transition: top 0.75s ease;
-moz-transition: top 0.75s ease;
-ms-transition: top 0.75s ease;
-o-transition: top 0.75s ease;
transition: top 0.75s ease;
}
nav.stick {
position: fixed;
min-height: 100px;
top: -100%;
z-index: 999;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="s-nav">
...
</nav>
</header>
&#13;