Question

是的，所以我有一个基本的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;
}

Answer 1

当你使用jquery向下滚动时，

在块后面的“nav”中添加前35px ..并且当滚动顶部时需要删除它..

$(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"});
}
});

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

1 个答案: