Bootstrap에서 고정 탐색 모음을 만드는 방법은 무엇입니까?

Bootstrap에서 고정 탐색 모음을 만드는 방법

문제 이해

이 시나리오의 목표는 남아 있는 탐색 모음을 만드는 것입니다. 페이지가 로드될 때 뷰포트 하단에 있습니다. 사용자가 아래로 스크롤하면 막대가 위로 스크롤되어 페이지 상단에 고정되어야 합니다.

고정 Nav 막대 만들기

HTML 및 CSS:

<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li></p>
<p></ul><br></div></p>
<pre class="brush:php;toolbar:false">#nav-container {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #202020;
  z-index: 10;
}

.nav-menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.nav-menu > li {
  margin: 0 10px;
}

.nav-menu > li > a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
}

.sticky {
  position: fixed;
  top: 0;
}

구현 Fixity

JavaScript:

const menuElement = document.getElementById("nav-container");

window.addEventListener("scroll", () => {
  if (window.scrollY > 100) {
    menuElement.classList.add("sticky");
  } else {
    menuElement.classList.remove("sticky");
  }
});
````
This code adds the "sticky" class to the navigation bar element when scrolling down more than 100 pixels. When scrolling back up to a point where it's no longer fixed, the "sticky" class is removed.

**CSS:**

/고정 상태 스타일링 /
.sticky {
배경색: #ffffff ;
상자 그림자: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

This styling can be customized to match the desired appearance of the fixed navigation bar.

위 내용은 Bootstrap에서 고정 탐색 모음을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css bootstrap this viewport background ul

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.