用于固定导航的Javascript if-语句
用于固定导航的Javascript if-语句
提问于 2016-05-24 20:30:02
一段时间前，我试图弄清楚如何创建一个固定的导航条，使其平滑地动画以适应用户的显示宽度。例如，我的导航栏是在我的页面中间，它不适合网页的宽度。我想让它做的是，当用户滚动通过它，它坚持到他们的浏览器顶部，并播放一个很好，平滑的动画，适合页面的宽度。
我已经完成了这样的工作:当用户滚动通过它时，它就会产生动画效果，但是我也希望它在回滚到页面顶部的时候反向播放相同的动画。目前，当用户滚动回滚时，导航栏会立即恢复正常，而不需要播放动画。
我想这里需要一份声明。例如，if语句将检查用户是否已经向下滚动到超过218个像素(这是我为固定导航条设置的值)，如果是，当用户滚动回滚时，它将删除播放前向动画的Javascript函数，而是播放反向动画。然而，我对Javascript的编码经验不是很好，所以我希望我能得到一些帮助。下面是我当前的Javascript函数，它只播放前向动画：
$(document).ready(function() {
var aboveHeight = 218;
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>这肯定是个简单的壮举，对吧？另外，fixed和sticknav类是我创建的类。当用户滚动回顶部时，我将不得不创建一个unfixed类。sticknav只是一个包装器，它封装我的导航栏，告诉Javascript在哪里应用fixed类。如果您需要更多的信息，请告诉我。然而，和我的特定网站，我似乎不可能创建一个JSFiddle或类似的东西。抱歉。
回答 1
Stack Overflow用户
发布于 2016-05-24 20:50:00
<header class="header black-bg">
<div class="row top-header">
<div
class="header-admission-name col-lg-9 col-md-9 col-sm-9 col-xs-12">
Enter Your Site title</div>
</div>
<!-- Nav -->
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="">Menue 1</a></li>
<li class="drpodown"><a href="" class="dropdown-toggle"
data-toggle="dropdown">Menue 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">SUB 1 </a></li>
<li><a href="#">SUB 2</a></li>
</ul></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script type="text/javascript">
window.onload=(function() {
var docElem = document.documentElement,
didScroll = false,
changeHeaderOn = 170;
document.querySelector( 'header' );
function init() {
window.addEventListener( 'scroll', function() {
if( !didScroll ) {
didScroll = true;
setTimeout( scrollPage, 250 );
}
}, false );
}
//
function scrollPage() {
if($("#main-content").height()>740 && $("header").height()<300)
{
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
$('.top-header').hide();
$("header").addClass("fixed-header");
$('.wrapper').css({ 'margin-top' : "100px"});
$('.ad-menu').css({ 'padding-top' : 1 + "px", 'padding-bottom' : 1 + "px" });
if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
$('.ad-menu > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
}else{
$('.ad-menu > li > a').css({ 'padding-top' : 20 + "px", 'padding-bottom' : 20 + "px" })
$('.search-side').css({ 'margin-top' : -7 + "px" });
};
}
else {
$('.top-header').slideDown(300);
$("header").removeClass("fixed-header");
$('.wrapper').css({ 'margin-top' : "0px"});
$('.ad-menu').css({ 'padding-top' : 7 + "px", 'padding-bottom' : 7 + "px" });
if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
$('.ad-menu > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
}else{
$('.ad-menu > li > a').css({ 'padding-top' : 28 + "px", 'padding-bottom' : 28 + "px" })
$('.search-side').css({ 'margin-top' : 0 + "px" });
};
}
didScroll = false;
}else{
didScroll = false;
}
}
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
init();
})();
</script>
<style>
.fixed-header nav {
position: fixed;
width: 98%;
z-index: 1;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37423295
复制相关文章
相似问题
腾讯云开发者
