JavaScript가 없는 고정 탐색 모음

추가 JavaScript를 작성하는 번거로움 없이 고정 메뉴를 만들고 싶었던 적이 있습니까? CSS가 이제 당신을 덮었습니다!



성공의 열쇠는 재산position: sticky 입니다. 그리고 대부분의 브라우저에 대해 "부분 지원"으로 표시되어 있음에도 불구하고 꽤 잘 작동하고 있습니다. "일부"는 일부 브라우저가 일부 테이블 설정에서 해당 속성을 올바르게 처리하지 않는다는 사실 때문입니다. 테이블을 사용하지 않고 거기에 약간의 끈적거림을 원하지 않는다면 가셔도 좋습니다.

다음은 내 코드personal site에서 변경된 코드입니다.

전에

자바스크립트

const navbar = document.querySelector('.navbar');
let sticky = navbar.offsetTop;
const navbarScroll = () => {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add('sticky')
  } else {
    navbar.classList.remove('sticky');
  }
};

window.onscroll = navbarScroll;

스타일시트

.navbar {
  position: relative;
}
.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

후에

자바스크립트

// nope

스타일시트

.navbar {
  position: sticky;
  top: 0; /* it does not reposition right away,
             but determines at which point it sticks */
}

주석에서 알 수 있듯이 요소가 스크롤되면 고정할 위치를 알려야 합니다top. 의미: 막대를 현재 보기의 맨 위 0까지 스크롤하지 않는 한 계속 위로 스크롤됩니다. 그 후에 그것은 거기에 머문다.

테스트되지는 않았지만 다른 모든 방향에서도 작동할 수 있습니다. 하단 막대에 대한 사람? ;-)

결론

CSS와 JS의 여러 줄보다 두 줄의 CSS가 더 낫다고 생각합니다.

아직 존재하지 않는 것은 CSS 선택자가 없기 때문에 붙어 있거나 없을 때 다른 스타일을 적용하는 방법입니다. 그것이 올지는 모르지만 희망을 가질 수 있습니다.

나는 최근에 내 기사»How I wrote JavaScript to avoid JavaScript«에서 이것과 일반적인 JS 사용에 대해 블로그에 올렸습니다. 걱정하지 마십시오. 내가 했던 것처럼 모든 것을 버릴 필요는 없습니다. 그러나 나는 당신에게 생각할 거리를 주고 싶습니다. 너무 많은 JS로 문제를 해결했다는 것을 깨달을 수도 있습니다.

또한 HTML 및 CSS 표준의 사양 및 개발을 확인하십시오. 발견할 흥미로운 사항이 항상 있습니다. 최근 몇 년간 가장 큰 변화 중 하나는 플렉스박스와 그리드였는데, 많은 웹 디자이너들이 이러한 추가 사항을 환영했다고 생각합니다.