스크롤을 따르는 여러 헤더를 만드는 방법
화면 스크롤에 따라 변경되는 끈적한 헤더를 만드는 방법
✴︎요점은 이 을 자작으로 만드는 방법
HTML,CSS
샘플로서 다음과 같은 헤더와 블록을 가진 div 요소의 그룹이 있다고 가정합니다.
sample.html
<!DOCTYPE HTML>
<html>
<style>
body {
margin: unset;
}
div.block{
height: 2600px;
width: 100%;
}
div.block.one{
background-color: #C1A1FF;
}
div.block.two{
background-color: #9892E8;
}
div.block.three{
background-color: #AEBEFF;
}
div.block.four{
background-color: #92BAE8;
}
div.header{
font-size: 1.5em;
text-align: center;
}
div.header.one{
background-color: #A269FF;
}
div.header.two{
background-color: #6D5FE8;
}
div.header.three{
background-color: #768DFF;
}
div.header.four{
background-color: #5797EB;
}
</style>
<body >
<div class='block one'>
<div class="header one">
This is Header Number one.
</div>
</div>
<div class='block two'>
<div class="header two">
This is Header Number two.
</div>
</div>
<div class='block three'>
<div class="header three">
This is Header Number three.
</div>
</div>
<div class='block four'>
<div class="header four">
This is Header Number four.
</div>
</div>
</body>
</html>
글쎄,
이런 느낌입니다.
헤더가 끈적하지 않습니다.
동적으로 끈적 끈적하게 JS를 더합시다.
JS
sample.js
let activateStickyHeader = function() {
let blocks = document.getElementsByClassName('block');
let targetHeight = [];
for (let i = 0; i < blocks.length; i++) {
targetHeight.push(blocks[i].getBoundingClientRect().top + window.pageYOffset);
}
let headers = document.getElementsByClassName('header')
document.addEventListener('scroll', function(){
let y = window.pageYOffset ;
for (let key in targetHeight) {
if( y >= targetHeight[key]){
headers[key].style.position = 'sticky';
headers[key].style.top = '0';
} else {
headers[key].style.position = '';
headers[key].style.top = '';
}
}
})
};
document.addEventListener("DOMContentLoaded", function(){
activateStickyHeader()
}, false);
JS 처리로 무엇을하고 있습니까?
document.getElementsByClassName('block')각 블록의 요소를 얻고,blocks[i].getBoundingClientRect().top + window.pageYOffset이것으로 각 블록 요소의 화면상의 위치(스크롤량을 미 고려)＋페이지 톱을 0으로 했을 때의 화면을 열었을 때의 스크롤량= 페이지 내의 위치입니다.
이들을 배열에 넣고 윈도우의 스크롤 위치가 각 블록의 페이지 내의 위치에 도달했을 때,
대응하는 헤더의 스타일을 재기록해 끈적한 헤더로 하고 있습니다.
sample.js를 sample.html에 넣어 보면
그래. 좋은 느낌이네요!
Reference
이 문제에 관하여(스크롤을 따르는 여러 헤더를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YamanoNigiwai/items/4654194c6bdc307d3301텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
