js 여러 제목 흡수 효과 실현

4747 단어 js표제 흡 정
내 비게 이 션 의 흡수 효과 에 대해 pc 단 과 이동 단의 수 요 는 약간의 차이 가 있 을 수 있다.pc 에서 우 리 는 보통 상단 내 비게 이 션 만 필요 합 니 다.이동 단 에 서 는 페이지 를 미 끄 러 뜨 릴 때 여러 제목 의 흡 정 이 필요 합 니 다(예 를 들 어 지역 의 선택 은 성 을 흡 정 해 야 합 니 다).
하나의 제목 흡 정과 여러 개의 제목 흡 정의 차 이 는 여러 개의 제목 흡 정 은 하나의 높이 범 위 를 확정 해 야 하 며 이 범위 에서 하나의 제목 흡 정 만 있 을 수 있 고 다른 것 은 모두 고정 효과 이다.
페이지 레이아웃 및 스타일
이 곳 은 효 과 를 테스트 하기 위해 중복 되 는 section 탭 을 사 용 했 습 니 다.실제 수요 에 따라 레이아웃 과 스타일 을 만 들 었 습 니 다.

<body>
 <ul id="container">
 <h1>         </h1>
 <section>
  <div class="box">header1</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 
 <!--     header1    ，        ，    -->
 
 <section>
  <div class="box">header5</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 
 </ul>
</body>

<style type="text/css">
 * {
 padding: 0;
 margin: 0;
 }
 ul {
 width: 100%;
 }
 li {
 width: 200px;
 color: white;
 margin: 10px;
 list-style: none;
 border-radius: 5px;
 border: 1px solid #191970;
 background: #4169E1;
 text-align: center;
 }
 div {
 width: 100%;
 height: 30px;
 color: white;
 padding-left: 20px;
 background: #DC143C;
 }
 .box1 {
 position: fixed;
 top: 0;
 }
</style>
2.js 의 작성
1.흡수 효과 가 필요 한 모든 제목 을 가 져 옵 니 다.이 제목 은 같은 레이아웃 과 스타일 로 가 져 오 는 것 이 좋 습 니 다.가 져 올 때 더욱 빠 르 고 통일 할 수 있 습 니 다.

var box = document.getElementsByClassName('box'), //             
  section = document.getElementsByTagName('section'); //       ，
2.제목 개 수 를 가 져 오고 배열 을 정의 합 니 다.모든 제목 을 부모 요소 로 저장 하 는 거리(offsetTop)입 니 다.

var ot = [],  //       offsetTop
  len = box.length;   //
3.모든 제목 을 옮 겨 다 니 며 offsetTop 를 가 져 오고 ot 배열 에 저장 합 니 다.

for(let i=0; i<len; i++) {
 ot.push(box[i].offsetTop);  //       offsetTop
}
4.window 의 스크롤 이 벤트 를 감청 하고 scrollTop 가 져 오기;만약 에 스크롤 높이 가 i 번 째 제목 의 offsetTop 과 i+1 번 째 제목 의 offsetTop 사이 에 있다 면(예 를 들 어 스크롤 높이 는 header 1 과 header 2 의 offsetTop 사이 에 있 고 header 1 흡 정),i 번 째 제목 은 box 1 스타일 을 추가 하여 흡 정 을 실현 합 니 다.

window.onscroll = function () {
 //       
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 if(st>ot[i] && st<ot[i+1]) { //       ，              
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}
5.네 번 째 단계 에서 문제 가 있 습 니 다.스크롤 의 마지막 제목(i)을 가 져 올 수 없습니다(i+1).
해결 방법:첫 번 째 단계 에서 얻 은 section 태그 집합 에서 마지막 키 목록(section[0])을 꺼 낸 다음 마지막 키 목록 의 높이 를 가 져 와 마지막 제목 의 표시 높이 범 위 를 계산 하고 ot 배열 에 저장 합 니 다.

//            ，               
//section[len-1].getBoundingClientRect().height
//       number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
마지막 효과


전체 js 코드

var box = document.getElementsByClassName('box'), //             
 section = document.getElementsByTagName('section'); //       
 
var ot = [],       //       offsetTop
 len = box.length;   //     
 
for(let i=0; i<len; i++) {
 ot.push(box[i].offsetTop);  //       offsetTop
}
 
//            ，               
//section[len-1].getBoundingClientRect().height
//       number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
 
window.onscroll = function () {
 //       
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 if(st>ot[i] && st<ot[i+1]) { //       ，              
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
사용 하지 않 았 던 11 개 이상 의 자바 스 크 립 트 특성(소결)
PHP 프로그램 데 몬 구현 방법 에 대한 자세 한 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage