0

そこで、sticky と呼ばれる jquery ライブラリを使用する Web テンプレートを受け取りました。スクロールすると、ページの上部にナビゲーション (下部から開始して上に移動) が「固定」されます。

ロゴが静止位置 (スクロール後) に到達したら、ナビゲーションにロゴを配置できるようにしたいと考えています。この Web サイトに似ています - http://99u.com/。画像ヘッダーを過ぎてスクロールすると、ロゴがナビゲーション バーにフェード インし、ページにとどまります。とにかく、ここにjqueryコードの抜粋があります：

<script>
  $(window).load(function() {
    $('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
  });
</script>

そして、ここにhtmlの抜粋があります：

<div with image slideshow></div>
<nav>
  <div class="container">
    <div class="thirteen columns">
      <ul id="nav" class="links">
        <li id="sticker"><img src="[image i want to display after scroll]" /></li>
        <li>About</li>
        <li>Contests</li>
        <li>etc.</li>
      </ul>
    </div>
  </div>
</nav>
<div's and the rest of the page's content></div>

このテンプレート全体がレスポンシブです。何か助けをいただければ幸いです。または、誰かが私を正しい方向に向けることができれば幸いです。ありがとう！

4

3 に答える 3

1

提案をありがとう。二人とも助かった！これが私がやったことです：

<script>
  $(window).load(function() {
    $('#sticker').css({'display':'none'});
    $('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
    $(this).scroll(function() {
      if($('nav').offset().top <= $(window).scrollTop()) {
        $('#sticker').fadeIn('fast');
      } else {
        $('#sticker').css({'display':'none'});
      }
    });
  });
</script>
于 2013-06-17T14:42:47.233 に答える