Boostrap：..affix底部不会移动到其父节点的底部

Question

我正在使用Bootstrap的词缀侧导航。当您向下滚动到导航所引用的元素的底部时，类..affix底部将应用于导航元素，并且它应该滚动(就像靴带记录片中的侧导航一样)。

但是，当类更改为词缀底部并应用以下样式时，词缀导航将移至页面顶部(并移出视口)。

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

我不确定这个问题是否与靴带有关。我已经比较了引导本地使用的样式和我使用的样式，它们完全相同。

这是我使用的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>

​

由于Bootstrap的词缀有一些问题，我编写了自己的脚本，当您比.affix元素的顶部位置更远时，它会将词缀的类从. Affix -top更改为.row元素的顶部，当您滚动到.row元素的底部时，它将添加. affix -底部类。

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

我不知道为什么它在没有位置的情况下在引导带工作:相对论性和span3的等效高度。

Answer 1

尝尝这个

只需向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>