Làm thế nào để sử dụng plugin liên kết mới trong bootstrap 2.1.0 của twitter?

Tài liệu bootstrap về chủ đề đó hơi khó hiểu đối với tôi. Tôi muốn đạt được hành vi tương tự như trong tài liệu với thanh điều hướng kèm theo: Thanh điều hướng nằm bên dưới tiêu đề đoạn / trang và khi cuộn xuống, trước tiên nó phải cuộn dọc cho đến khi lên đến đầu trang, sau đó cố định ở đó để cuộn xuống thêm .

Vì jsFiddle không hoạt động với khái niệm thanh điều hướng, tôi đã thiết lập một trang riêng để sử dụng như một ví dụ tối thiểu: http://i08fs1.ira.uka.de/~s_drr/navbar.html

Tôi sử dụng cái này làm thanh điều hướng của mình:

<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a> 
                This is my navbar.
             </div>
        </div> <!-- container -->
    </div> <!-- navbar-inner -->
</div> <!-- navbar -->

Tôi nghĩ rằng tôi sẽ muốn data-offset-topcó giá trị 0 (vì thanh phải "dính" vào đầu "nhưng với 50 có ít nhất một số hiệu ứng có thể xem được.

Nếu cũng đặt mã javascript tại chỗ:

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

Bất kỳ sự giúp đỡ nào được đánh giá cao.

Tôi đang gặp vấn đề tương tự và tôi tin rằng tôi đã tìm thấy giải pháp cải thiện.

Đừng bận tâm đến việc chỉ định data-offset-toptrong HTML của bạn. Thay vào đó, hãy chỉ định nó khi bạn gọi .affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

Ưu điểm ở đây là bạn có thể thay đổi bố cục trang web của mình mà không cần cập nhật data-offset-topthuộc tính. Vì điều này sử dụng vị trí được tính toán thực tế của phần tử, nó cũng ngăn chặn sự mâu thuẫn với các trình duyệt hiển thị phần tử ở một vị trí hơi khác.

Bạn vẫn sẽ cần phải kẹp phần tử lên đầu bằng CSS. Hơn nữa, tôi phải đặt width: 100%trên phần tử điều hướng vì .navcác phần tử position: fixedhoạt động sai vì một số lý do:

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

Một điều cuối cùng: Khi một phần tử gắn liền trở thành cố định, phần tử của nó không còn chiếm chỗ trên trang nữa, dẫn đến các phần tử bên dưới nó sẽ "nhảy". Để ngăn chặn sự xấu xí này, tôi bọc thanh điều hướng trong một thanh divcó chiều cao mà tôi đặt bằng với thanh điều hướng trong thời gian chạy:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

Đây là jsFiddle bắt buộc để xem nó hoạt động .

Chỉ mới triển khai điều này lần đầu tiên và đây là những gì tôi đã tìm thấy.

Các data-offset-topgiá trị là số lượng pixel mà bạn phải di chuyển để cho tác dụng dán đến nơi mất. Trong trường hợp của bạn, khi 50pxđược cuộn, lớp trên mục của bạn sẽ được thay đổi từ .affix-topthành .affix. Bạn có thể muốn đặt data-offset-topkhoảng 130pxtrong trường hợp sử dụng của mình.

Khi sự thay đổi lớp này xảy ra, bạn phải định vị phần tử của mình trong css bằng cách tạo kiểu định vị cho lớp .affix. Bootstrap 2.1 đã xác định .affixnhư position: fixed;vậy tất cả các bạn cần làm là thêm giá trị vị trí của riêng bạn.

Thí dụ:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}

Để khắc phục sự cố này, tôi đã sửa đổi plugin liên kết để phát ra một sự kiện jQuery khi một đối tượng được gắn hoặc không được gắn.

Đây là yêu cầu kéo: https://github.com/twitter/bootstrap/pull/4712

Và mã: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

Và sau đó thực hiện việc này để đính kèm thanh điều hướng:

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>

Bạn cần xóa .affix()khỏi tập lệnh của mình.

Bootstrap cung cấp tùy chọn hoàn thành mọi thứ thông qua data-attributeshoặc trực tiếp JavaScript hầu hết thời gian.

Tôi có cái này từ mã nguồn của twitterbootstrap và nó hoạt động khá tốt:

HTML:

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

CSS:

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

JS:

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});

Bạn chỉ cần xóa tập lệnh. Đây là ví dụ của tôi:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>

Cảm ơn namuol và Dave Kiss về giải pháp. Trong trường hợp của tôi, tôi đã gặp sự cố nhỏ với chiều cao và chiều rộng của thanh điều hướng khi tôi sử dụng các plugin afflix và thu gọn cùng nhau. Vấn đề với chiều rộng có thể được giải quyết dễ dàng khi kế thừa nó từ phần tử mẹ (trong trường hợp của tôi là vùng chứa). Ngoài ra, tôi có thể quản lý để làm cho nó sụp đổ một cách trơn tru bằng một chút javascript (thực tế là coffeescript). Mẹo là đặt chiều cao trình bao bọc thành autotrước khi chuyển đổi thu gọn xảy ra và sửa nó trở lại sau đó.

Đánh dấu (haml):

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

CSS:

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

Bản thảo luận:

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()

Giải pháp của tôi để đính kèm thanh điều hướng:

function affixnolag(){

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function(){      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        })
        .on('unaffixed', function(){
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        });
 }

Tương tự như câu trả lời được chấp nhận, bạn cũng có thể làm như sau để thực hiện mọi thứ trong một lần:

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

Điều này không chỉ gọi ra affixplugin mà còn bao bọc phần tử được gắn trong một div để duy trì chiều cao ban đầu của thanh điều hướng.