6

ユーザーがページを下にスクロールしたときにフェード (または不透明度を変更) できる DIV (または実際には何か) を作成する方法に興味があります。この DIV はページの上部に配置されますが、ページの最上部にある場合にのみ明確に表示されます。

さらに、ページ上の現在のスクロール位置に関係なく、II が onmouseover でこの要素をフェードバックさせることができれば理想的です。

4

3 に答える 3

8

jQueryは簡潔なソリューションを可能にする一方で、ほとんどのブラウザーの不一致を隠します。開始するための簡単なモックアップを次に示します。

<script type="text/javascript">

    //when the DOM has loaded
    $(document).ready(function() {

        //attach some code to the scroll event of the window object
        //or whatever element(s) see http://docs.jquery.com/Selectors
        $(window).scroll(function () {
              var height = $('body').height();
              var scrollTop = $('body').scrollTop();
              var opacity = 1;

              // do some math here, by placing some condition or formula
              if(scrollTop > 400) {
                  opacity = 0.5;
              }

              //set the opacity of div id="someDivId"
              $('#someDivId').css('opacity', opacity);
        });
    });
</script>

以下も参照してください。

于 2009-09-27T22:06:53.070 に答える
2

scrollTop の実際の値を使用して不透明度レベルを指定し、スムーズなフェードを実現しようと考えました。また、第 2 部のホバー状態も追加しました。私のために数学を改良してくれた David に感謝します。

//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
  var height = $("body").height();
  var scrollTop = $("body").scrollTop();
  var opacity = 1;

  if(scrollTop < 41)
    {opacity = 1-Math.floor(scrollTop)/100;}
    else
    {opacity = 0.6;}

  $("#header").css("opacity", opacity);
  $("#header").hover(function(){
    $(this).css("opacity", 1);
    },function(){
    $(this).css("opacity", 0.6);
    });
});
于 2011-12-07T06:52:47.803 に答える
0

スクロール イベントを使用し、document.documentElement.scrollTop の値を分析して、適切な不透明度を設定します。 http://www.quirksmode.org/dom/events/scroll.html

于 2009-09-27T21:05:33.950 に答える