當用戶滾動時隱藏在導航欄下的內容

沒錯，所以我有一個基本的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

當用戶滾動時隱藏在導航欄下的內容

回答

相關問題