Bootstrap 3.0을 사용하여 고정 탐색 모음을 어떻게 만들 수 있나요?

Bootstrap을 사용하여 고정 탐색 모음 만들기

웹사이트가 로드될 때 사용자는 탐색 모음이 페이지 상단에 일관되게 표시되는 것을 선호하는 경우가 많습니다. . 사용자가 아래로 스크롤하면 탐색 모음이 위로 스크롤되어 결국 화면 상단에 고정되어야 합니다. 이 가이드는 Bootstrap 3.0을 사용하여 이를 달성하는 방법을 보여줍니다.

JQuery 및 JavaScript를 사용하는 솔루션:

<div> <h2> 여기를 원하세요</h2><br> <p>여기에 맞게 자바스크립트 크기를 조정하세요. 창</p><br></div></p>
<p><nav><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>

로그인 후 복사

html, 본문 {<br> 높이: 4000px;<br>}</p>
<p>.navbar -고정 {<br> 상단: 0;<br> Z-색인: 100;<br> 위치: 고정;<br> 너비: 100%;<br>}</p>
<h1>body_div {</h1>
<p>상단: 0;<br> 위치: 상대;<br> 높이 : 200px;<br> 배경색: 녹색;<br>}</p>
<h1>배너 {</h1>
<p>너비: 100%;<br> 높이: 273px;<br> 배경색: 회색;<br> 오버플로: 숨김;<br>}</p>
<h1>nav_bar {</h1>
<p>테두리: 0;<br> 배경색: #202020;<br> 테두리 반경: 0px;<br> 여백-하단: 0;<br> 높이: 30px;<br>} </p>
<p>//아래 CSS는 링크용이며 고정에는 필요하지 않습니다. nav<br>.nav_links {<br> 여백: 0;<br>}</p>
<p>.nav_links li {<br> 디스플레이: inline-block;<br> margin-top: 4px;<br>} </p>
<p>.nav_links li a {<br> 패딩: 0 15.5px;<br> 색상: #3498db;<br> 텍스트 장식: 없음;<br>}<br>

$(document).ready( function() {<br> //상위 div의 높이와 일치하도록 아래 정수를 변경합니다. <br> //배너라고 합니다.  마지막 숫자에 1을 추가하면 됩니다.  console.log($(window).scrollTop())<br> //nav<br> //bar나 div 등을 정확히 수정하고 싶을 때 스크롤 위치가 무엇인지 알아내기 위해.  나는 당신을 위해 console.log에 갇혀 있습니다.  <br> //위치를 알면 제거하세요.<br> $(window).scroll(function () {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

로그인 후 복사