JavaScript で天井効果を実装する (コード例)-jsチュートリアル-php.cn

JavaScript で天井効果を実装する (コード例)

不言

リリース： 2020-02-27 13:39:11

転載

3189 人が閲覧しました

この記事では、JavaScript での天井効果の実現 (コード例) を紹介します。困っている友人が参考になれば幸いです。

JavaScript で天井効果を実装する (コード例)

知識のポイント

1. スクロールファミリーとオフセットファミリーの併用

2. ナビのオフセットトップが画面スクロールの高さより大きい場合は、天井取り付けを実行します

3.固定クラスを追加し、条件が満たされている場合はナビゲーションにクラス名を追加します

ランニング効果

JavaScript で天井効果を実装する (コード例)

ページをスクロールするときは、ナビゲーションバーが上部に持ち上げられていることを確認してください

JavaScript で天井効果を実装する (コード例)

コード:

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

ログイン後にコピー

さらにクールな JavaScript 特殊効果コード、すべてが含まれています:

js 特殊効果コレクション

以上がJavaScript で天井効果を実装する (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。