停止内容隐藏在导航栏下，当用户滚动

Stop content hiding under nav bar when user scrolls

本文关键字：用户 滚动 导航 隐藏      更新时间：2023-09-26

对，所以我有一个基本的Jquery脚本，当用户滚动过导航栏(向下154像素)时，为导航栏添加一个"fixed"类。问题是，导航条下方的内容会向上跳跃35像素(导航条的高度)。我尝试添加一个div类，填充35px，显示当用户滚动过导航栏，这虽然修复了其他显示问题，但仍然允许内容提升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;
}

添加顶部35px的"nav"后块当u向下滚动使用jquery..并且需要在滚动顶部时删除它。

$(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"});
}
});
相关文章：