[英]Stick div to top of page when start scrolling
我試圖制作一個div(id =“ hoe”),該div從用戶滾動起就一直停留在頂部。 滾動之前,div位於標題下方。 不幸的是,經過大量嘗試,我無法使其正常工作。 對於我做錯的任何提示和幫助,我們深表感謝。 這是我在測試版本中的代碼:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<style type="text/css">
#header
{
background-color: blue;
width: 100%;
height: 125px;
}
#hoe
{
background-color: red;
height: 180px;
width: 100%;
z-index: 9999;
top: 125;
position: fixed;
}
#een
{
margin-top: 180px;
background-color: green;
height: 700px;
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
if ($('body').hasClass('lock')) {
bar_pos = $('#hoe').offset();
if (bar_pos.top >= (125+180)) {
$('#hoe').css('top', 0);
//document.getElementById("hoe").style.top="0"; also tried this
}
});
});
</script>
</head>
<body class="lock">
<div id="header">
</div>
<div id="hoe">
</div>
<div id="een">
</div>
</body>
</html>
我已經修改了您的代碼,並在此處創建了一個小提琴: http : //jsfiddle.net/UcX4A/
您的JavaScript中有多余的括號
$(document).ready(function() {
if ($('body').hasClass('lock')) {
bar_pos = $('#hoe').offset();
if (bar_pos.top >= (125+180)) {
$('#hoe').css('top', 0);
//document.getElementById("hoe").style.top="0"; also tried this
}
}); <<< Surplus bracket
});
此外,“滾動”事件沒有附加任何內容,因此也沒有進行評估。 我更改了您的:
$(document).ready(function() {
到:
$(window).scroll(function() {
看到這個: http : //jsfiddle.net/WTnEd/
$(document).ready(function () {
var bar_pos;
$(window).scroll(function (e) {
if ($('body').hasClass('lock')) {
bar_pos = $('#hoe').offset();
if (bar_pos.top >= (125 + 180)) {
$('#hoe').css('top', 0);
}
else{
$('#hoe').css('top', 125);
}
};
});
});
據我了解的問題,這是在開始滾動時將div粘貼到頁面頂部的另一種方法:
<div id="header" style="position:fixed; top:0px; left:0px; right:0px;
height:100px; z-index:2; background:blue;"></div>
<div id="hoe" style="position:fixed; top:100px; left:0px; right:0px;
height:100px; z-index:2; background:red;"></div>
<div id="een" style="position:absolute; top:200px; left:0px; right:0px;
height:100px; z-index:1;">
<p>dummy text</p>
<p>dummy text</p>
<p>dummy text</p>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.