Javascript로 천장 효과 구현(코드 예)
- 不言앞으로
- 2018-03-31 10:03:093195검색
이 기사에서는 Javascript(코드 예제)로 천장 효과를 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
지식 포인트
1. 스크롤 패밀리와 오프셋 패밀리의 결합
2.nav의 offsetTop이 화면 스크롤 높이보다 클 경우 천장 리프팅을 수행합니다.
3. 고정 클래스, 조건이 충족되면 nav에 클래스 이름을 추가합니다.
실행 효과
 "158278189380184Javascript로 천장 효과 구현(코드 예)")
페이지를 스크롤할 때 탐색 표시줄이 맨 위에 있는지 확인하세요.
코드:
<!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>더 멋진 자바스크립트 특수 효과 코드, 올인원: js 특수 효과 컬렉션
위 내용은 Javascript로 천장 효과 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제