溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML中需要給div一個id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="head"></div>
</body>
</html>
<style>
#head {
background-color: #989898;
width: 100%;
height: 100px;
margin-top: 100px;
}
#head[data-fixed="fixed"]{
position: fixed;
top:0;
left: 0;
margin: 0;
}
</style>
web前端開發(fā)學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法
（詳細的前端項目實戰(zhàn)教學視頻，PDF）<script>
var obj = document.getElementById("head");
var ot = obj.offsetTop;
document.onscroll = function () {
var st = document.body.scrollTop || document.documentElement.scrollTop;
obj.setAttribute("data-fixed",st >= ot?"fixed":"")}
</script>
/*
* 封裝吸頂函數(shù)，需結合css實現(xiàn)。
* 也可以直接用js改變樣式，可以自行修改。
*/
function ceiling(obj) {
var ot = obj.offsetTop;
document.onscroll = function () {
var st = document.body.scrollTop || document.documentElement.scrollTop;
obj.setAttribute("data-fixed",st >= ot?"fixed":"");
}
}
<script src="ceiling.js"></script>
<script>
window.onload = function () {
/*獲取對象*/
var wrap = document.getElementById("head");
ceiling(wrap) /*調用吸頂函數(shù) */
};
</script>
web前端開發(fā)學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法
（詳細的前端項目實戰(zhàn)教學視頻，PDF）免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
