1

下にスクロールしたとき（またはdivが一番上に達したとき）に最初のdivの不透明度を1から0に変更するjQueryスクリプトをすでに見つけました。

しかし、次の div がページの上部に到達したときに同じことを行うようにしたいと思います。すべて同時にではありません。

コードの一部を次に示します。

それが HTML 部分です。

<div id="wrap">

  <section id="logo">
    <img src="images/layout/logo.png"> 
  </section> <!-- logo -->

  <section id="intro">  
    <img src="images/layout/welcome.png">

    <p><h2>Text text text text here here here here</h2></p>
  </section> <!-- intro -->

</div>

次に、私の jQuery スクリプトは、現在ロゴ セクションでのみ機能しています。

var divs = $('#logo');
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/100) });
});

何が起こっているのかを完全に明確にするために、現在のページへのリンクを残します。

www.hyker.be/opacity

「近づいて」のdivが「ロゴ」のdivと同じことをしたいだけです。

4

1 に答える 1

0

最初にそれらをすべて追加し、範囲内にある場合にのみフェードします。 

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

アップデート

これはうまくいくようです。オブジェクトの上部ではなく中心に基づいてフェードします。

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      var height = $(this).outerHeight();
      offset = offset + height/2;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

資力

于 2012-10-09T22:21:35.197 に答える