css - bootstrap :.affix-bottom不会移到其父级的底部

我正在使用Bootstrap的词缀侧面导航。向下滚动到导航所指元素的底部时，类.affix-bottom将应用于导航元素，并且应该滚动（完全按照Boostrap documentary中的侧面导航的工作方式）。

但是，当类更改为affix-bottom并应用以下样式时，affix-navigation将移动到页面顶部（并且移出视口）。

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>

由于Bootstrap的Affix出现了一些问题，我编写了自己的脚本，当您滚动到.row元素的顶部以外的位置并且滚动到.row元素的底部时，该脚本将词缀的类别从.affix-top更改为.affix。 .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');
      }
    }
  });
});

我不知道为什么它在Bootstrap中工作时没有position：relativ和span3的等效高度。

最佳答案

尝试这个

只需将类词缀添加到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>

关于css - bootstrap :.affix-bottom不会移到其父级的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17422327/