Heim >Web-Frontend >js-Tutorial >Javascript implementiert den Deckeneffekt (Codebeispiel)
Javascript implementiert den Deckeneffekt (Codebeispiel)
- 不言nach vorne
- 2018-03-31 10:03:093210Durchsuche
Was Ihnen dieser Artikel bringt, ist Javascript zum Implementieren von Deckeneffekten (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Wissenspunkte
1. Kombinierte Verwendung von Scroll-Familie und Offset-Familie
2. Wenn der OffsetTop der Navigation größer ist als die Höhe des Bildschirmlaufs, wird die Deckenmontage durchgeführt
3. Fügen Sie eine feste Klasse hinzu, und wenn die Bedingungen erfüllt sind, fügen Sie einen Klassennamen hinzu nav
Laufeffekt
 "158278189380184Javascript implementiert den Deckeneffekt (Codebeispiel)")
Beim Scrollen der Seite ist die Navigationsleiste garantiert decken- montiert
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;border:none}
img{vertical-align: top;width: 100%;}
section{width: 70%;margin: 0 auto;}
.nav{position: fixed;left: 0;top: 0;width: 100%}
</style>
</head>
<body>
<header id="head">
<img src="images/top.png" alt="">
</header>
<nav id="nav">
<img src="images/nav.png" alt="">
</nav>
<section>
<img src="images/body01.png" alt="">
<img src="images/body02.png" alt="">
</section>
<script src="../../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load',function (ev) {
// 1. 求出头部高度
var navTopHeight = myTool.$('nav').offsetTop;
// 2. 监听页面滚动
window.addEventListener('scroll',function (ev1) {
var scrollTopHeight = myTool.scroll().top;
// 2.1 判断
if(scrollTopHeight >= navTopHeight){
myTool.addClassName(myTool.$('nav'),'nav')
}else{
myTool.removeClassName(myTool.$('nav'),'nav');
}
})
})
</script>
</body>
</html>Weitere coole Javascript-Spezialeffektcodes, alle in: JS-Spezialeffektsammlung
Das obige ist der detaillierte Inhalt vonJavascript implementiert den Deckeneffekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!