-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
첫번째랑 마지막 요가+폰하는 그림이 높이가 꼬였습니다
20.09.07 19:14 작성 조회수 186
0
보여드린 스크린샷처럼 첫번째는 여백에 비해 그림이 너무 동떨어지고, 마지막 폰하는 그림이 요가 그림을 스크롤하면 바로 밑으로 나옵니다 😥
css 코드는
html {
font-family: "Noto Sans KR", sans-serif;
}
body {
margin: 0;
}
div,
section,
header,
footer,
p,
h1,
h2 {
box-sizing: border-box;
}
a {
color: royalblue;
}
img {
max-width: 100%;
height: auto;
}
.global-width {
max-width: 620px;
margin: 0 auto;
padding: 0 1rem;
}
.scroll-graphic {
position: sticky;
top: 0;
height: 100vh;
}
.graphic-item {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
opacity: 0;
transition: 0.5s;
}
.visible {
opacity: 1;
}
.scene-img {
max-height: 100vh;
}
.scroll-text {
position: relative;
}
.step {
margin-bottom: 60vh;
padding: 0.5rem 1rem;
border-radius: 10px;
border: 0.2px solid rgba(216, 216, 216, 0.2);
box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px;
background: rgba(255, 255, 255, 0.8);
}
이거구요
js는
(() => {
const stepElems = document.querySelectorAll('.step');
const graphicElems = document.querySelectorAll('.graphic-item');
let currentItem = graphicElems[0];
for (let i = 0; i < stepElems.length; i++) {
// stepElems[i].setAttribute('date-index', i);
stepElems[i].dataset.index = i;
graphicElems[i].dataset.index = i;
}
function activate() {
currentItem.classList.add('visible');
}
function inactivate() {
currentItem.classList.remove('visible');
}
window.addEventListener('scroll', () => {
let step;
let boundingRect;
for (let i = 0; i < stepElems.length; i++) {
step = stepElems[i];
boundingRect = step.getBoundingClientRect();
if (boundingRect.top > window.innerHeight * 0.1 &&
boundingRect.top < window.innerHeight * 0.8) {
inactivate();
currentItem = graphicElems[step.dataset.index];
activate();
}
}
});
activate();
})();
이 코드입니다 어떤게 문제일까요..?😥
답변을 작성해보세요.
1
0
0
1분코딩
지식공유자2020.09.09
보니까 영상에 그 부분 설명이 빠져있더라고요^^;
강의 노트에 텍스트로 같이 보실 수 있게 수정했습니다!
그리고 감사드려요 Caesiumy님! ㅎㅎ
0
답변 4