Javascript implementiert den Deckeneffekt (Codebeispiel)-js-Tutorial-php.cn

Javascript implementiert den Deckeneffekt (Codebeispiel)

不言

Freigeben： 2020-02-27 13:39:11

nach vorne

3214 Leute haben es durchsucht

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.

Javascript implementiert den Deckeneffekt (Codebeispiel)

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

Javascript implementiert den Deckeneffekt (Codebeispiel)

Beim Scrollen der Seite ist die Navigationsleiste garantiert decken- montiert

Javascript implementiert den Deckeneffekt (Codebeispiel)

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(&#39;load&#39;,function (ev) {
  // 1. 求出头部高度
  var navTopHeight = myTool.$(&#39;nav&#39;).offsetTop;
  // 2. 监听页面滚动
  window.addEventListener(&#39;scroll&#39;,function (ev1) {
  var scrollTopHeight = myTool.scroll().top;
  // 2.1 判断
  if(scrollTopHeight >= navTopHeight){
   myTool.addClassName(myTool.$(&#39;nav&#39;),&#39;nav&#39;)
  }else{
   myTool.removeClassName(myTool.$(&#39;nav&#39;),&#39;nav&#39;);
  }
  })
 })
 </script>
</body>
</html>

Nach dem Login kopieren

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!