0

我正在使用 Bootstrap 的词缀侧导航。当您向下滚动到导航引用的元素的底部时，.affix-bottom 类将应用于导航元素并且它应该滚动（与Boostrap 纪录片中的侧边导航完全一样）。

但是，当类更改为 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-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');
      }
    }
  });
});

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

4

1 回答 1

0

尝试这个

只需将类词缀添加到 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-02T10:42:24.640 回答