Home > Article > Web Front-end > Javascript implements ceiling effect (code example)

Javascript implements ceiling effect (code example)

不言forward: 2018-03-31 10:03:093148browse

What this article brings to you is Javascript to implement ceiling effects (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Knowledge points

1. Combined use of scroll family and offset family

2. When the offsetTop of the nav is greater than the height of the screen scrolling, perform ceiling lifting

3. Add a fixed class. If the conditions are met, add a class name to the nav

Running effect

Javascript implements ceiling effect (code example)

When scrolling the page, ensure that the navigation bar is ceiling-mounted

Javascript implements ceiling effect (code example)

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>

More cool javascript special effects codes, all in: js special effects collection

The above is the detailed content of Javascript implements ceiling effect (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：How to convert entity classes and xml filesNext article：How to convert entity classes and xml files

See more

Javascript implements ceiling effect (code example)

Related articles