2017-06-12 241 views
1

该代码控制着我的导航。在滚动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类被移除时)导航仍然在屏幕外。

+0

因为'$( '导航')的CSS( '顶', '100像素')的可能;'? –

+0

我尝试过,没有。似乎并不重要。 – user3550879

+0

似乎按预期工作[jsfiddle](https://jsfiddle.net/NotInUse/3n4zqg70/)。你能解释一下这个问题吗? – Scott

回答

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. 
 
    } 
 

 
    }); 
 

 
});
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