Question

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

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

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元素的顶部位置以及滚动到的时，将.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中工作：relativ和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>

Bootstrap：.affix-bottom不会移动到其父级的底部

1 个答案: