Boostrap：.affix底部不會移動到其父項底部

我正在使用Bootstrap的附加側導航。當您向下滾動到導航引用的元素的底部時，類.affix-bottom將應用於導航元素，並且應該滾動（完全按照Boostrap documentary中的側面導航的工作方式）。Boostrap：.affix底部不會移動到其父項底部

但是，當類變爲粘貼底部並應用以下樣式時，詞綴導航將移動到頁面的頂部（並且移出視口）。

affix-bottom { 
    position: absolute; 
    top: auto; 
    bottom: 200px; 
}

我不確定這個問題與Bootstrap有關。我比較了Bootstrap原生使用的樣式和我使用的樣式，它們完全相同。

這是我使用HTML：

<div class="row"> 
    <div class="span3 bs-docs-sidebar" id="navfaq"> 
     <ul class="nav nav-list bs-docs-sidenav affix-top"> 
     <li class=""> 
      <a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go to anchor1</a> 
     </li> 
     <li class=""> 
      <a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go to anchor2</a> 
     </li> 
     <li class=""> 
      <a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go to anchor3</a> 
     </li> 
     <li class=""> 
      <a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go to anchor4</a> 
     </li> 
     <li class=""> 
      <a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go to anchor5</a> 
     </li> 
     <li class="active"> 
      <a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">Go to anchor6</a> 
     </li> 
     <li> 
      <a> 
      <button class="btn pull-center">Contact</button> 
      <button class="btn pull-center">Call</button> 
      <p class="caption">on weekdays</p> 
      </a> 
     </li> 
     </ul> 
    </div> 
<div class="span9"> 
    ... 
</div>

自舉的詞綴是有一些問題，我寫我自己的腳本改變詞綴的類從.affix頂到.affix當您滾動到.row元素的頂部位置以及滾動到.row元素的底部時，它將添加類.affix-bottom。

$(document).ready(function() { 
    $(window).scroll(function(){ 
    if($('.nav.nav-list.bs-docs-sidenav').height() >= (($('#anchor1').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40))) { 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix'); 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom'); 
    } 
    else { 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix'); 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');  
     if($(window).scrollTop() >= (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) { 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top'); 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix'); 
     } 
     else if($(window).scrollTop() < (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) { 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix-top'); 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix'); 
     } 
    } 
    }); 
});

這個保持我整晚和任何幫助將不勝感激。

編輯：好的，我終於修好了。但是，這更多的是解決方法。我改變了JS以下：

$(document).ready(function() { 
    $(window).scroll(function(){ 
    if($('.nav.nav-list.bs-docs-sidenav').height() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40))) { 
     $(".span3.bs-docs-sidebar").css({ 
     'position': 'relative', 
     'height': $('.row .span9').height() 
     }); 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix'); 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom'); 
    } 
    else { 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix'); 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');  
     if($(window).scrollTop() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) { 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top'); 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix'); 
     } 
     else if($(window).scrollTop() < (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) { 
     $('.nav.nav-list.bs-docs-sidenav').addClass('affix-top'); 
     $('.nav.nav-list.bs-docs-sidenav').removeClass('affix'); 
     } 
    } 
    }); 
});

我不知道爲什麼它的工作在引導無位置：relativ併爲span3同等的高度。

來源

2013-07-02 Georg

的路＃1「解決」一個問題是後一個答案和接受。你自己也可以自己做這個問題。請不要將其「標記」爲「[解決]」。 – deceze

試試這個

只需添加類貼上到div的

<div class="span3 bs-docs-sidebar affix affix-top" id="navfaq"> 
      <ul class="nav nav-list bs-docs-sidenav "> 
       <li class=""><a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go 
        to anchor1</a> </li> 
       <li class=""><a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go 
        to anchor2</a> </li> 
       <li class=""><a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go 
        to anchor3</a> </li> 
       <li class=""><a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go 
        to anchor4</a> </li> 
       <li class=""><a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go 
        to anchor5</a> </li> 
       <li class="active"><a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6"> 
        Go to anchor6</a> </li> 
       <li><a> 
        <button class="btn pull-center"> 
         Contact</button> 
        <button class="btn pull-center"> 
         Call</button> 
        <p class="caption"> 
         on weekdays</p> 
       </a></li> 
      </ul> 
     </div>

來源

2013-07-02 10:42:24

Boostrap：.affix底部不會移動到其父項底部

回答

相關問題