Làm cách nào để sửa thanh điều hướng bootstrap thành đầu sau khi div được cuộn?

Tôi đang cố gắng để có được navbar của tôi với bootstrap xuất hiện sau một div nhất định, được gọi là "A". Div "a" nằm ở đầu trang, và có chiều cao khoảng 400px. Khi người dùng cuộn qua div "a" và thanh cuộn, tôi muốn thanh cuộn để dính vào đầu. Tương tự như thế này: https://www.facebook.com/home nhưng tôi không có video ở trên cùng, đó là hình ảnh.Làm cách nào để sửa thanh điều hướng bootstrap thành đầu sau khi div được cuộn?

Chúng ta có thể làm điều đó bằng cách tự khởi động không?

Cảm ơn!

Nguồn

2013-04-05 abisson

tôi đã viết một plugin jQuery để làm điều này - http://drewdahlman.github.com/Pinned/

siêu đơn giản - chỉ cần đảm vị trí tiêu đề của bạn tuyệt đối và vị trí của nó - sau đó thiết lập các plugin jQuery -

$("#element").pinned({ 
    bounds: 100, // when to become sticky 100px 
    scrolling: 0, // position during scroll 0px 
});

Điều đó sẽ làm điều đó!

Chúc mừng!

Nguồn

2013-04-05 16:25:16

Để hiển thị hiệu ứng trên facebook.com/home, vị trí thanh điều hướng của bạn phải được đặt thành tĩnh (hoặc tương đối/tuyệt đối) cho đến khi người dùng cuộn qua 400px và sau đó bạn cần đặt vị trí cố định để giữ nguyên đầu màn hình. Điều này có thể được thực hiện với một chút javascript.

Nguồn

2013-04-05 16:22:34

Nếu bạn muốn đạt được điều này bằng cách sử dụng Bootstrap của Twitter, hãy kiểm tra 'Affix' js. Bạn xác định điểm "cố định" bằng cách sử dụng "data-offset-top" và sau đó thanh điều hướng sẽ trở thành cố định ở trên cùng khi người dùng cuộn xuống.

CSS:

#con .well { 
    height:390px; 
} 

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
}

HTML:

<div class="container" data-spy="affix" data-offset-top="400" id="nav"> 
    <div id="nav" class="navbar"> 
     <div class="navbar-inner"> ...

Javascript:

$('#nav').affix();

Đây là fiddle làm việc: http://jsfiddle.net/skelly/df8tb/

Dưới đây là một ví dụ làm việc (được cập nhật cho Bootstrap 3): http://bootply.com/90936

Nguồn

2013-04-05 17:16:58 ZimSystem

Great câu trả lời. Được thăng hạng bởi vì Affix.js là một phần của lõi Bootstrap chính thức, nơi các câu trả lời khác ngụ ý rằng các mã libs/mã bên ngoài là cần thiết. – Jon

hãy làm theo điều này. bạn sẽ không thấy điều chụp khi thanh trình đơn đạt đến vị trí trên cùng.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    body { 
     position: relative; 
    } 
    .affix { 
     top:0; 
     width: 100%; 
     z-index: 9999 !important; 
    } 
    .navbar { 
     margin-bottom: 0px; 
    } 

    .affix ~ .container-fluid { 
    position: relative; 
    top: 50px; 
    } 
    #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
    #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
    #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
    #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
    #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
    </style> 
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>Scrollspy & Affix Example</h1> 
    <h3>Fixed navbar on scroll</h3> 
    <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> 
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> 
</div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav>  

<div id="section1" class="container-fluid"> 
    <h1>Section 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section2" class="container-fluid"> 
    <h1>Section 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section3" class="container-fluid"> 
    <h1>Section 3</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section41" class="container-fluid"> 
    <h1>Section 4 Submenu 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section42" class="container-fluid"> 
    <h1>Section 4 Submenu 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 

</body> 
</html>

tham khảo: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

Nguồn

2017-11-23 17:13:51

Làm cách nào để sửa thanh điều hướng bootstrap thành đầu sau khi div được cuộn?

Trả lời

Các vấn đề liên quan