Javascript로 천장 효과 구현(코드 예)-JS 튜토리얼-php.cn

Javascript로 천장 효과 구현(코드 예)

不言

풀어 주다： 2020-02-27 13:39:11

앞으로

3189명이 탐색했습니다.

이 기사에서는 Javascript(코드 예제)로 천장 효과를 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Javascript로 천장 효과 구현(코드 예)

지식 포인트

1. 스크롤 패밀리와 오프셋 패밀리의 결합

2.nav의 offsetTop이 화면 스크롤 높이보다 클 경우 천장 리프팅을 수행합니다.

3. 고정 클래스, 조건이 충족되면 nav에 클래스 이름을 추가합니다.

실행 효과

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>

로그인 후 복사

더 멋진 자바스크립트 특수 효과 코드, 올인원: js 특수 효과 컬렉션

위 내용은 Javascript로 천장 효과 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!