html文字特效，Html吸頂效果

2023-12-25 阅读 28 评论 0

摘要：Html吸頂效果一、HTML HTML中需要給div一個id ? <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> </head> <body> <div id="head"></div> </body> </html>

Html吸頂效果

一、HTML

HTML中需要給div一個id

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body>
<div id="head"></div>
</body>
</html>

二、CSS

<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>

html文字特效，?

三、JS

1、面向過程

<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>

2、面向對象

1）封裝方法

/* * 封裝吸頂函數，需結合css實現。* 也可以直接用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":"");}}

2）調用方法

<script src="ceiling.js"></script>
<script>window.onload = function () {/*獲取對象*/var wrap = document.getElementById("head");ceiling(wrap) /*調用吸頂函數  */};
</script>

吸頂空調制熱效果好嗎，轉載于:https://www.cnblogs.com/Michelle20180227/p/8487035.html

原文链接：https://hbdhgg.com/5/194975.html

上一篇：線性表的鏈式存儲結構是一種，數據結構和算法:線性表鏈式存儲的簡單實現

下一篇：pcb芯片部分引腳是綠色，Altium Designer 在pcb下導入的原件引腳是綠的