1

私はJQueryに少し慣れていないので、ページの読み込み時にページの下部にあるdivをフェードインさせようとしています。ユーザーがスクロールを開始すると、divはフェードアウトし、スクロールして上部に戻るときに再表示する必要があります.

divをフェードインするためだけに行ったコードは機能せず、ここで見ることができますhttp://jsfiddle.net/DeZnT/

私が使用しているjQueryは

$(document).ready(function () {
    $(function(){
         $(".other_product_links").animate({bottom:'0px'});
      });
});

どうぞよろしくお願いいたします。

4

2 に答える 2

7

フェードインするには (対応する fadeOut メソッドもあります):

$("#element").fadeIn(300);

ユーザーがどこまでスクロールしたかを検出するには、次のようなものを使用できます。

$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top do something


        } else {
        // otherwise do something else.

        }
    });
});
于 2013-06-11T15:11:30.570 に答える
1

最初のステップは、クラスから display:none を削除し、一番下の位置をページの下から始まるように設定することです (これは 0 から div の高さを差し引いた値です)。

.other_product_links {
  height: 200px;
  width:100%;
  opacity: 0.8;
  background: #ffd6fd;
  border-top: 2px solid #f095d9;
  position: fixed;
  bottom: -200px;

}

次に、jQuery が行う必要があるのは、下部を 0 に移動することだけです。

$(".other_product_links").animate({bottom: '0px'}, 1000);

それはあなたを中途半端にします。私は以前にスクロール部分を行ったことがありません。

于 2013-06-11T15:24:42.883 に答える