删除课程后，导航无法返回到原始位置
问题描述：
该代码控制着我的导航。在滚动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>我需要它开始屏幕和过渡下来，只有当滚动> 300像素（与内容< 300像素滚动）（当.stick向上转变关闭屏幕类被应用）。代码有效，但是当我向后滚动（当.stick类被移除时）导航仍然在屏幕外。
答
如果我正确地理解了你，你想要元素回到原来的位置，它开始的权利？如果是这样;尝试下面的调整;
$(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.
}
});
});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>+0
问题是它只是'出现'在顶部。我希望它在应用.stick类时从顶部开始动画。所以它需要在应用时从屏幕开始 – user3550879
因为'$（ '导航'）的CSS（ '顶'， '100像素'）的可能;'？ –
我尝试过，没有。似乎并不重要。 – user3550879
似乎按预期工作[jsfiddle]（https://jsfiddle.net/NotInUse/3n4zqg70/）。你能解释一下这个问题吗？ – Scott