상단에 고정되는 스크롤 탐색 표시줄을 만드는 방법은 무엇입니까?

상단에 고정되는 스크롤 내비게이션 바 만들기

고정 내비게이션 바

처음에 나타나는 내비게이션 바를 만드는 것을 목표로 합니다. 페이지 하단. 아래로 스크롤하면 막대가 페이지 상단에 도달하고 그대로 유지될 때까지 이동합니다. 이는 각각 navbar-fixed-bottom 및 navbar-fixed-top 클래스를 사용하여 달성됩니다.

코드 문제 해결

제공된 코드를 검사하면 다음이 드러납니다.

• 올바른 navbar-fixed-top 클래스 사용법
• 적절한 그림자 제거

그러나 막대가 원하는 대로 작동하도록 하려면 다음이 필요합니다.

• 처음에 페이지 하단에 나타나도록 <div>의 위치를 ​​조정합니다.
• <div>에 큰 여백 상단 또는 하단을 추가하여 밀어보세요. down

다음 수정된 코드를 고려하세요.

세련된 HTML

<div>

수정된 CSS

.navbar-fixed-top {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    margin-top: 800px; /* Add a sufficient margin-top to adjust the navigation bar's initial position */
}

대체 솔루션

Bootstrap의 내장 탐색 모음 동작이 원하는 대로 되지 않으면 더 간단한 jQuery 또는 JavaScript 구현으로 전환할 수 있습니다:

HTML 코드

   <div>

CSS 코드

/* Initially, the nav bar is absolute, positioned at the bottom */
#nav_bar {
    position: absolute;
    bottom: 0;
}

/* When the #content is scrolled 40px, the navbar changes to fixed */
#content {
    height: 3000px;  /* Increase this to match your page content length */
    scroll: auto;
}

@media screen and (max-width: 480px) {
    #content {
        height: 8000px;
    }
}

/* This makes the navbar fixed positioned at the top, until the content is fully scrolled */
.fixed-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript 코드

$(window).scroll(function(){
    if ($(window).scrollTop() > 40) {
        $("#nav_bar").addClass("fixed-nav");
     } else {
         $("#nav_bar").removeClass("fixed-nav");
     }
 });
위 내용은 상단에 고정되는 스크롤 탐색 표시줄을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!