当用户滚动时隐藏在导航栏下的内容

没错，所以我有一个基本的Jquery脚本，当用户滚动浏览栏（向下154像素）时，向导航栏添加一个“固定”类。问题是，导航栏下方的内容会跳跃35个像素（导航栏的高度）。我尝试添加一个带有35px填充的div类，用于显示用户何时滚动浏览栏，尽管解决了其他显示问题，但仍然允许内容提升35个像素。这是我到目前为止有：当用户滚动时隐藏在导航栏下的内容

jQuery的，增加了固定类和jQuery的，显示了填充：

<script> 
var num = 154; //number of pixels before modifying styles 
$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) { 
     $('ul.nav').addClass('fixed'); 
    } else { 
     $('ul.nav').removeClass('fixed'); 
    } 
}); 
</script> 
<script> 
var num = 154; //number of pixels before modifying styles 

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) { 
     $('.padd').show(); 
    } else { 
     $('.padd').hide(); 
    } 
}); 
</script>

的HTML：

<body ONMOUSEWHEEL="OnMouseWheel()"> 
    <p><a href="index.html"><img src="images/BannerPicture.png" alt="Leisure in mk logo" width="1024" height="150"></a></p> 
<ul class="nav"> 
<li class="nav"> 
    <a href="index.html" style="display:block;height:100%;width:100%">Home</a> 
    </li> 
    <li class="nav"> 
    <a href="centremk.html" style="display:block;height:100%;width:100%">Centre MK</a> 
    </li> 
    <li class="nav"> 
    <a href="../music.php" style="display:block;height:100%;width:100%">Music</a> 
    </li> 
    <li class="nav"> 
    <a href="../more.php" style="display:block;height:100%;width:100%">More Stuff</a></li> 
</ul> 
<div class="pad"> 
</div> 
    <div class="padd"> 
    </div> 
    <div class="Informationbox"> 
text and shizz 
</div>

最后，CSS：

ul.nav { 
    border: 1px solid #ccc; 
    border-width: 1px 0; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    width: 1024px; 
    display: table; 
    table-layout: fixed; 
    vertical-align: middle; 
    height: 35px; 
    vertical-align: middle; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #C60; 
    font-size: 25px; 

} 
/* this styles each link when the mouse is NOT hovered over */ 
li.nav { 
    display: table-cell; 
    vertical-align: middle; 
    height:100%; 
    align-items: center; 
    vertical-align:middle; 
    line-height:35px; 
    margin-right: auto; 
    margin-left: auto; 
    transition:.4s; 
} 
li.nav a { 
    display: block; 
    height: 100%; 
    width: 80%; 
    text-decoration: none; 
    vertical-align: middle; 
    align-items: center; 
    vertical-align: middle; 
    margin-right: auto; 
    margin-left: auto; 
    transition:.4s; 
} 
li.nav a:hover { 
    line-height: 25px; 
    transition:.4s; 
} 
ul.nav.fixed { 
    position: fixed; 
    top: 0; 
    left: 50%; 
    margin-left: -512px; 
    margin-right: 0; 
} 

.padd { 
    padding-bottom: 40px; 
    display:none; 
} 
.Informationbox { 
    background-color: #FF9900; 
    border: 1px solid #FFF; 
     width: 1024px; 
    margin-right: auto; 
    margin-left: auto; 
}

来源

2014-05-19 Byonex

尝试制作http://jsfiddle.net/与您的问题，你可能会得到更多的人愿意帮助。 – Danny

你可以在http://jsfiddle.net/重新创建吗？ – timo

添加margin-top：35到块之后的“nav”，当你使用jquery向下滚动时 – Daya

将顶部35px添加到块后面的“导航”当你使用jquery向下滚动...并且需要删除它wh en卷轴顶端..

$(window).bind('scroll', function() {  
if ($(window).scrollTop() > num) { 
    $('ul.nav').addClass('fixed'); 
    $('.your_div').css({"top" : "35px"}); 
} else { 
    $('ul.nav').removeClass('fixed'); 
    $('.your_div').css({"top" : "0px"}); 
} 
});

来源

2014-05-19 13:35:33 Daya

当用户滚动时隐藏在导航栏下的内容

回答

相关问题