0

私は、スクロールするとサイドナビゲーションバーがページの上部に上がるが、上部に固執するgetbostrap Webサイトに似たscrollspyを構築しようとしています( http://getbootstrap.com/css/ )。さまざまなヘッダーと互換性があるように、ヘッダー サイズにアクセスするための小さなスクリプトを html に書きましたが、それを別の JavaScript ファイルに移動したいと考えています。ここに、scrspy と affix のすべての html と css を含めます。

HTML:

<div id="myScrollspy" role="complementary">

  <script>
    var element = document.getElementById('headerSize');
    document.write('<ul class="nav scrspy affix" data-spy="affix" data-offset-top="' +    element.offsetHeight + '" data-offset-bottom="200">');
  </script>

  <ul class="nav scrspy affix" data-spy="affix">
    <li class="active"><a href="#section-1">Section One</a></li>
    <ul class="nav scrspy">
      <li><a href="#section-1-1">Section 1.1</a></li>
      <li><a href="#section-1-2">Section 1.2</a></li>
    </ul>
    <li><a href="#section-2">Section Two</a></li>
    <li><a href="#section-3">Section Three</a></li>
    <li><a href="#section-4">Section Four</a></li>
    <li><a href="#section-5">Section Five</a></li>
  </ul>
</div>

<section>
  <h2 id="section-1">Section One</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-1-1">Section 1.1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.  

  <h2 id="section-1-2">Section 1.2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.

  <h2 id="section-2">Section Two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-3">Section Three</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-4">Section Four</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-5">Section Five</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
</section>

CSS:

.scrspy {
  > li {
    float: left;
    > a {
      color: @gray-dark;
      &:hover {
        border-right: 2px solid @blue;
      }
    }
  }
  .nav-stacked;
  .hidden-xs;
  .hidden-sm;
}
ul.scrspy, ul.scrspy ul li {
  width: 9.75rem;
}
ul.scrspy.affix {
  top: 1.85rem;
}
ul.scrspy ul li {
  padding: .315rem .47rem;
  padding-left: 1rem;
  font-size: @font-size-small;
}
ul.scrspy li.active a, ul.scrspy li.active a:hover {
  color: @daimler-blue;
  border-right: 2px solid @blue;
}
.affix {
  position: fixed;
}
ul.scrspy.affix {
  position: fixed;
  top: 0;
  z-index: 10;
}

これをhtmlにリンクされた別の.jsファイルで試しましたが、うまくいかないようです。JS:

$(document).ready(function () {
  var element = document.getElementById('headerSize');
  $('ul.scrspy').affix({
    offset: {
      top: element.offsetHeight
      bottom: 200
    }
  });
});
4

2 に答える 2

0

追加した

<ul class="nav scrspy affix" id="stay" data-spy="affix">

html に変更し、javascript を次のように変更しました。

$(document).ready(function () {
  var element = document.getElementById('headerSize');
  $("#stay").affix({
    offset: {
      top: element.offsetHeight
    }
  });
});
于 2014-07-24T17:52:07.297 に答える
0

css は.sticky-top-affixデモ用であることに注意してください。

また、スムーズにするためにそのクラスに設定したdata-top-add="20"ものに注意してください。topそれはオプションです - それを持っていないことを試してみて、何が起こるか見てください.

.sticky-top-affix {
    position: fixed;
    top: 20px;
}

body {
    height: 2000px;
}

nav {
    border: 1px solid black;
    width: 250px;
}

<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>

<nav class="sticky-top" data-top-add="20">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

var $stickyEls;

function onWindowScroll() {
    var scrollTop = $(window).scrollTop();
    $stickyEls.each(function() {
       var $el = $(this),
           topOffset = $el.data('topOffset');
       $el[scrollTop >= topOffset ?
           'addClass' : 'removeClass']('sticky-top-affix');
    });
}

function stickyTopInit() {
    $stickyEls = $('.sticky-top');

    // Save positions.
    $stickyEls.each(function() {
        var $el = $(this);
        var addToTop = +$el.attr('data-top-add') || 0;
        $el.data('topOffset', $el.offset().top - addToTop);
    });

    $(window).scroll(onWindowScroll);
}


$(document).ready(stickyTopInit);

フィドル: http://jsfiddle.net/y3umh/

ここで行っているのは、「スクロールしてメニューの上部を通過したときに を追加しsticky-top-affix、スクロールする前に削除する」ということだけです。

于 2014-07-23T21:25:59.403 に答える