[英]Content disappears under fixed element when fixed element stays on top when scrolling down the page
我有一些內容的問題,當頁面向下滾動時,它會在固定元素下消失。 下面的JS小提琴很好地展示了它。 基本上,7號以上的內容跳過固定導航元素。 我假設在將標題放在頂部后,必須有一個簡單的{padding-top:100px;}通過js應用於body。
<div id="ontop">something</div>
<header>navigation - stays on top when scrolling</header>
<div id="wrapper">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
7 - wrapper disappears above this point while scrolling down<br/>
8<br/>9<br/>10<br/>
</div>
CSS:
#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:100px; background-color:lightgrey;}
#wrapper {background-color:lightblue; height:5000px;}
.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px;}
最后JS:
$(function () {
var elem = $('aside'),
elemTop = elem.offset().top;
$(window).scroll(function () {
elem.toggleClass('fixed', $(window).scrollTop() > elemTop);
}).scroll();
});
謝謝您的幫助
需要在滾動時將#wrapper
元素的頂部邊距設置為切換wrapperBelow
類
$(function () { var elem = $('header'), wrapperElem = $('#wrapper'), elemTop = elem.offset().top; $(window).scroll(function () { elem.toggleClass('navfixed', $(window).scrollTop() > elemTop); wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop); }).scroll(); });
#ontop {width:100%; height:80px; background-color:yellow;} header {width:100%; height:100px; background-color:lightgrey;} #wrapper {background-color:lightblue; height:5000px;} .navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px;} .wrapperBelow{ margin-top:112px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ontop">something</div> <header>navigation - stays on top when scrolling</header> <div id="wrapper"> 1<br/>2<br/>3<br/>4<br/>5<br/>6<br/> 7 - wrapper disappears before this while scrolling<br/> 8<br/>9<br/>10<br/> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.