Bagaimana cara menggunakan plugin affix baru di bootstrap 2.1.0 twitter?

Dokumentasi bootstrap tentang topik itu sedikit membingungkan saya. Saya ingin mencapai perilaku serupa seperti di dokumen dengan bilah navigasi tambahan: Navbar berada di bawah judul paragraf / halaman, dan setelah menggulir ke bawah, itu harus digulirkan terlebih dahulu hingga mencapai bagian atas halaman, dan kemudian tetap di sana untuk scrolldown lebih lanjut .

Karena jsFiddle tidak bekerja dengan konsep navbar, saya telah menyiapkan halaman terpisah untuk digunakan sebagai contoh minimal: http://i08fs1.ira.uka.de/~s_drr/navbar.html

Saya menggunakan ini sebagai navbar saya:

<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 -->

Saya rasa saya ingin data-offset-topmemiliki nilai 0 (karena bilah harus "menempel" ke bagian paling atas "tetapi dengan 50 setidaknya ada beberapa efek yang dapat ditonton.

Jika juga letakkan kode javascript di tempatnya:

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

Setiap bantuan dihargai.

Saya mengalami masalah serupa, dan saya yakin saya menemukan solusi yang lebih baik.

Jangan repot-repot menentukan data-offset-topdalam HTML Anda. Sebagai gantinya, tentukan saat Anda memanggil .affix():

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

Keuntungannya di sini adalah Anda dapat mengubah tata letak situs Anda tanpa perlu memperbarui data-offset-topatribut. Karena ini menggunakan posisi elemen yang dihitung sebenarnya, ini juga mencegah inkonsistensi dengan browser yang membuat elemen pada posisi yang sedikit berbeda.

Anda masih perlu menjepit elemen ke atas dengan CSS. Selain itu, saya harus mengatur width: 100%elemen nav karena .navelemen position: fixedberperilaku tidak baik karena beberapa alasan:

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

Satu hal terakhir: Saat elemen yang ditempelkan menjadi tetap, elemennya tidak lagi menggunakan ruang di halaman, mengakibatkan elemen di bawahnya menjadi "melompat". Untuk mencegah keburukan ini, saya membungkus navbar divdengan ketinggian yang saya setel agar sama dengan navbar saat runtime:

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

.

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

Inilah jsFiddle wajib untuk melihatnya beraksi .

Baru saja menerapkan ini untuk pertama kalinya, dan inilah yang saya temukan.

The data-offset-topnilai adalah jumlah piksel yang harus Anda gulir agar efek pembubuhan ke tempat take. Dalam kasus Anda, setelah di 50px-scroll, kelas item Anda diubah dari .affix-topmenjadi .affix. Anda mungkin ingin mengatur data-offset-toptentang 130pxdalam kasus penggunaan Anda.

Setelah perubahan kelas ini terjadi, Anda harus memposisikan elemen Anda di css dengan memberi gaya pada posisi untuk kelas .affix. Bootstrap 2.1 sudah mendefinisikan .affixsebagai position: fixed;sehingga semua yang perlu Anda lakukan adalah menambahkan nilai-nilai posisi Anda sendiri.

Contoh:

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

Untuk memperbaiki masalah ini saya telah memodifikasi plugin affix untuk mengeluarkan acara jQuery ketika sebuah objek ditempelkan atau tidak.

Berikut ini permintaan pull: https://github.com/twitter/bootstrap/pull/4712

Dan kodenya: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

Dan kemudian lakukan ini untuk memasang bilah navigasi:

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

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

Anda perlu menghapus .affix()dari skrip Anda.

Bootstrap memberikan opsi untuk menyelesaikan hal-hal baik melalui data-attributesatau JavaScript langsung hampir sepanjang waktu.

Saya mendapatkan ini dari kode sumber twitterbootstrap dan bekerja dengan cukup baik:

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);
});

Anda hanya perlu menghapus skrip. Inilah contoh saya:

<!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>

Terima kasih kepada namuol dan Dave Kiss untuk solusinya. Dalam kasus saya, saya memiliki masalah kecil dengan tinggi dan lebar navbar saat saya menggunakan plugin afflix dan collapse bersamaan. Masalah dengan lebar dapat dengan mudah diselesaikan dengan mewarisinya dari elemen induk (wadah dalam kasus saya). Juga saya bisa membuatnya runtuh dengan lancar dengan sedikit javascript (sebenarnya coffeescript). Triknya adalah menyetel tinggi pembungkus ke autosebelum toggle runtuh terjadi dan memperbaikinya kembali setelahnya.

Markup (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;
  }
}

Coffeescript:

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()

Solusi saya untuk memasang bilah navigasi:

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();
        });
 }

Mirip dengan jawaban yang diterima, Anda juga dapat melakukan sesuatu seperti berikut untuk melakukan semuanya sekaligus:

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

Ini tidak hanya memanggil affixplugin, tetapi juga akan membungkus elemen yang ditempelkan dalam div yang akan mempertahankan tinggi asli navbar.