Bagaimana cara menggunakan plugin affix baru di bootstrap 2.1.0 twitter?


110

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.


apakah Anda mencoba menggunakan affix () di bilah navigasi utama halaman Anda?
Nithin Emmanuel

@NithinEmmanuel ya, lihat javascript di postingan atau di contoh: i08fs1.ira.uka.de/~s_drr/navbar.html
Dynalon

mengapa Anda tidak menggunakan use .navbar-fixed-topdaripada menggunakan affix ()?
Nithin Emmanuel

6
@NithinEmmanuel karena bukan itu yang saya inginkan. .navbar-fixed-topakan menempatkan bilah navigasi ke atas sepanjang waktu . Saya ingin tajuk halaman DI ATAS navbar, dan ketika menggulir ke bawah (dan dengan demikian bilah navigasi akan digulirkan) itu harus tetap di atas - kemudian dan hanya kemudian. Dokumen bootstrap menggunakan mekanisme yang sama dengan subnav di dokumen sebelumnya, sayangnya mereka telah menghapusnya untuk dokumen 2.1.0.
Dynalon

1
Salah satunya, penyarangan Javascript Anda salah. )};harus});
Owen

Jawaban:


160

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 .


6
Tip bagus untuk menghapus "lompatan" - benar-benar mengabaikan fakta bahwa item ini dihapus dan mengira masalah saya terkandung di bagian affix / js dari kode saya.
Thomas

1
Jawaban ini adalah yang terbaik! Semuanya bekerja sebagaimana mestinya. Bagian 'lompat' adalah yang hilang di sebagian besar tutorial yang saya temukan. Terima kasih!
Ricardo Otero

1
Satu koreksi penting: Gunakan offset () alih-alih position () di kode jquery Anda di cuplikan kode pertama Anda. Penjelasan: Fungsi position () memberi Anda offset dalam elemen induk, tetapi offset () adalah posisinya di dalam dokumen, yang sebenarnya Anda inginkan (ya, namanya kontra-intuitif). Jadi kode Anda tidak akan berfungsi jika elemen imbuhan Anda ada di dalam elemen lain. Anda juga hanya harus memberikan nilai "top" seperti ini: $ ("# nav"). Affix ({offset: {top: $ ('# nav'). Offset (). Top. Dan itu harus di dalam siap () agar Anda tahu bahwa tata letak halaman telah selesai.
atau

Thanks @orrd - Memperbarui jawaban dan biola saya!
namuol

Bagus! Bekerja dengan sempurna dan sangat mulus. Ngomong-ngomong, saya sedang mencari contoh yang sama dengan footer tempel. Jika Anda tahu cara melakukannya, dapatkah Anda memperbarui jsFiddle? Terima kasih!
Jocelyn

76

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

1
Terima kasih, itu agak berhasil. Saya telah memperbarui halaman contoh saya untuk itu. Masalahnya sekarang, segera setelah bilah navigasi mendapat "imbuhan" sebagai kelas css, kelas css navbar dibuang. tapi menurut saya itu hanya bug / shortcomming dari bootstrap. Tidak akan mudah untuk mengubah tanpa melakukannya di KURANG dan membangun kembali bootstrap.
Dynalon

Menurut saya .navbarkelas tersebut dipertahankan - apakah Anda yakin?
Dave Kiss

Terima kasih atas jawaban ini, saya menghabiskan waktu lama untuk mencoba mencari tahu
Reuben

Lihat jawaban saya untuk solusi yang sedikit lebih baik dan lebih umum.
namuol

5

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>

3

Anda perlu menghapus .affix()dari skrip Anda.

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


2

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

1

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>

1

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

0

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

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.