css - Boostrap: .affix-bottom が親の下部に移動しない

Question

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 要素の一番上の位置を超えてスクロールし、下までスクロールすると、接辞のクラスを .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');
      }
    }
  });
});

position:relativ と span3 の同等の高さがなくても Bootstrap で機能する理由がわかりません。

score 0 · Accepted Answer

これを試して

クラス接辞を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 - Boostrap: .affix-bottom が親の下部に移動しない

1 に答える 1

Related

Reference