Bootstrap에서 고정 탐색 모음을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-03 15:14:15

원래의

675명이 탐색했습니다.

How to Create a Sticky Navigation Bar in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!