바닐라 JavaScript : 애니메이션 스티커 내비게이션 메뉴 작성

우리는 사용자가 스크롤하는 거리를 표시하기 위해 선정 변수를 사용합니다. 페이지가로드되면 0으로 초기화됩니다. 우리는 배너 하일 변수를 사용하여 메뉴의 높이를 저장하고 <🎜 🎜> 및 <🎜 dom 요소에 대한 참조가 필요합니다.

스크롤 방향을 만듭니다 .banner-wrapper 다음으로, 우리는 스크롤 방향을 결정하여 그에 따라 메뉴를 표시하거나 숨길 수 있도록해야합니다. .banner 우리는 NewOffset이라는 변수로 시작합니다. 페이지가로드되면

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

아래로 스크롤하면 NewOffSet이 누적보다 크게 만들어지고 탐색 메뉴가 미끄러 져 사라져야합니다. 스크롤 업을 사용하면 새로운 오프셋이 누적보다 작게 만들어지며 탐색 메뉴는 반투명 효과로 다시 볼 수 있습니다. 이 비교 후, 우리는 사용자가 스크롤하는 거리를 추적하기 위해 NewOffset의 값으로 선방자를 업데이트해야합니다.

<🎜 🎜> <<> 메뉴 애니메이션

우리는 또한 페이지 상단에 도달하면 반투명 효과가 메뉴에서 제거되도록해야합니다. window.scrollY

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

<🎜 🎜> 이것은 작업 메뉴의 데모입니다. (외부 웹 사이트에 액세스 할 수 없으므로 Codepen Demo 링크에 삽입해야합니다. 실제 링크는 제공 될 수 없습니다)

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

이 기사에서는 애니메이션 내비게이션 메뉴를 설계하기 위해 Pure JavaScript (jQuery 필요 없음)를 사용하여 몇 줄의 코드를 작성하는 방법에 대해 설명합니다. 아래로 스크롤하면 메뉴가 미끄러 져 스크롤하면 메뉴가 다시 밀려 나옵니다. 이는 수직 스크롤 방향을 모니터링하고 필요할 때 CSS 변환을 DOM 요소에 적용하여 수행됩니다. 이 맞춤형 솔루션은 귀하의 요구와 사양에 따라 쉽고 유연하게 디자인 할 수있는 더 많은 자유를 제공합니다. JavaScript 기술을 향상시키고 싶습니까? JavaScript 및 JavaScript : Next로 시작하는 코스를 확인하십시오.

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

(JavaScript 애니메이션의 FAQ 섹션은 여기에 포함되어야하며 컨텐츠는 입력 텍스트와 일치합니다. 공간 제한으로 인해 여기에서 생략됩니다.)