0

私が達成しようとしているのは、複数の画像をページの上部に貼り付けて、スクロールすると互いに重なり合うようにすることです。非常に良い例はこれです。

私が今持っているのは、JSスクリプトを介して常にユーザーのスクリーンの高さ/幅である3つのdivです。これらの div 内には画像があります。

<div id="part1">
    <div class="row">
        <div class="twelve columns">
            <img src="img/part1.png"> 
        </div><!-- .twelve columns -->
    </div><!-- .row -->
</div><!-- part1 -->

<div id="part2">
    <div class="row">
        <div class="twelve columns">
            <img src="img/part2.png"> 
        </div><!-- .twelve columns -->
    </div><!-- .row -->
</div><!-- part2 -->

<div id="part3">
    <div class="row">
        <div class="twelve columns">
            <img src="img/part3.png"> 
        </div><!-- .twelve columns -->
    </div><!-- .row -->
</div><!-- part3 -->

#part1, #part2, #part3 { width:100%; height:100%; }
#part1 { z-index:1; }
#part2 { z-index:2; }
#part3 { z-index:3; }
.stick { position:fixed; top:0; margin:0 auto; }

私は、次のような最もよく見られる関数をいじっています。

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#part1_anchor').offset().top;
  if (window_top > div_top) {
    $('#part1').addClass('stick');
  } else {
    $('#part1').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

しかし、それは私に望ましい結果を与えません。また、この関数に複数の div を定義することもできません。私はアイデアを使い果たしています。どんな助けも本当に感謝しています。

4

1 に答える 1

0

この素晴らしいスクリプトで私の問題を修正しました

スティッキースクロール

于 2013-11-08T14:32:10.130 に答える