Twitter'ın önyükleme 2.1.0'da yeni ek eklentisi nasıl kullanılır?

Bu konuyla ilgili önyükleme dokümantasyonu benim için biraz kafa karıştırıcı. Ek gezinme çubuğuna sahip belgelerde olduğu gibi benzer bir davranış elde etmek istiyorum: Gezinme çubuğu bir paragraf / sayfa başlığının altındadır ve aşağı kaydırıldığında önce sayfanın üst kısmına ulaşana kadar kaydırılmalı ve ardından daha fazla kaydırma için orada sabitlenmelidir .

JsFiddle, navbar konseptiyle çalışmadığından, minimal bir örnek olarak kullanım için ayrı bir sayfa oluşturdum: http://i08fs1.ira.uka.de/~s_drr/navbar.html

Bunu gezinme çubuğum olarak kullanıyorum:

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

data-offset-top0 değerinde olmak isteyeceğimi düşünüyorum (çünkü çubuk "en üste" yapışmalı "ama 50 ile en azından izlenebilir bir etki var.

Javascript kodunu da yerine koyarsanız:

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

Herhangi bir yardım takdir edildi.

Benzer bir sorun yaşıyordum ve iyileştirilmiş bir çözüm bulduğuma inanıyorum.

data-offset-topHTML'nizde belirtmeye zahmet etmeyin . Bunun yerine, aradığınızda belirtin .affix():

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

Buradaki avantaj, data-offset-topözelliği güncellemenize gerek kalmadan sitenizin düzenini değiştirebilmenizdir . Bu, öğenin gerçek hesaplanmış konumunu kullandığından, öğeyi biraz farklı bir konumda işleyen tarayıcılarla tutarsızlıkları da önler.

Yine de CSS ile öğeyi en üste sıkıştırmanız gerekecektir. Dahası, width: 100%nav öğesini ayarlamam gerekiyordu çünkü bazı nedenlerden ötürü uygunsuz davranışlara .navsahip öğeler position: fixed:

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

Son bir şey: Eklenmiş bir öğe sabitlendiğinde, öğesi artık sayfada yer kaplamaz ve altındaki öğelerin "atlamasına" neden olur. Bu çirkinliği önlemek diviçin, navbar'ı çalışma zamanında yüksekliği navbar'a eşit olacak şekilde ayarladığım bir şekilde sarıyorum:

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

.

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

İşte iş başında görmek için zorunlu jsFiddle .

Bunu ilk kez uyguladım ve işte bulduklarım.

data-offset-topDeğeri almak yere tutturmak etki için sırayla ilerlemek gerektiğini piksel miktarıdır. Kez durumda, 50pxkaydırılan, senin öğe üzerinde sınıf değiştirilir .affix-topiçin .affix. Muhtemelen kullanım durumunuzda data-offset-topyaklaşık olarak ayarlamak istersiniz 130px.

Bu sınıf değişikliği gerçekleştiğinde, sınıf için konumlandırmayı şekillendirerek öğenizi css'de konumlandırmalısınız .affix. Bootstrap 2.1 zaten tanımlar .affixolarak position: fixed;kendi konumunu değerleri eklemek yapmanız gereken şey çok.

Misal:

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

Bu sorunu tam olarak düzeltmek için, eklenti eklentisini, bir nesne yapıştırıldığında veya eklenmediğinde bir jQuery olayı yayınlayacak şekilde değiştirdim.

İşte çekme isteği: https://github.com/twitter/bootstrap/pull/4712

Ve kod: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

Ve sonra gezinme çubuğunu eklemek için şunu yapın:

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

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

.affix()Komut dosyanızdan kaldırmanız gerekiyor .

Bootstrap, data-attributesçoğu zaman işleri JavaScript aracılığıyla veya doğrudan JavaScript aracılığıyla gerçekleştirme seçeneği sunar .

Bunu twitterbootstrap'in kaynak kodundan aldım ve oldukça iyi çalışıyor:

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

Sadece komut dosyasını kaldırmanız gerekiyor. İşte benim örneğim:

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

Çözüm için namuol ve Dave Kiss'e teşekkürler. Benim durumumda, afflix ve daraltma eklentilerini birlikte kullandığımda navbar yüksekliği ve genişliği ile ilgili küçük bir sorun yaşadım. Genişlikle ilgili sorun, onu ana öğeden (benim durumumda kapsayıcı) miras alarak kolayca çözülebilir. Ayrıca biraz javascript ile (aslında kahve) sorunsuz bir şekilde çökmesini sağlayabilirim. İşin püf noktası, sarmalayıcı yüksekliğini autodaraltma geçişi gerçekleşmeden önce ayarlamak ve daha sonra düzeltmektir.

İşaretleme (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()

Gezinti çubuğunu eklemek için çözümüm:

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

Kabul edilen yanıta benzer şekilde, her şeyi tek seferde yapmak için aşağıdaki gibi bir şey de yapabilirsiniz:

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

Bu sadece affixeklentiyi çağırmakla kalmaz, aynı zamanda eklenmiş öğeyi navbar'ın orijinal yüksekliğini koruyacak bir div içine sarar.