14

divスクロールバーが特定の位置に達したときにフェードアウトする方法の例をここで見つけてください。しかし、それはスムーズなスロットル タイプのフェードではありません。そのjsfiddleのコードは次のとおりです。

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});​

スクロールバーの位置を不透明度のパーセンテージに反映させたい。たとえば、スクロール バーが一番上の位置にある場合、div の不透明度は 100% です。35px 下にスクロールすると、div の不透明度が 0% にフェードダウンします

おそらく、div A が上から 35px の位置にあり、div B = 100% の不透明度の場合のテクニックが考えられます。div A が上から 0px の場合、div B = 0% の不透明度。そして、その間のすべての段階でスムーズにフェードします。

ありがとう！

更新: ほとんどがかなりうまく機能するように助けてくれてありがとう. そのため、どのように機能するかを非常に明確にする新しい例を作成しました。
http://jsfiddle.net/J8XaX/1/

更新 2: モバイル デバイス: iPhone でこれを試しましたが、フェードがスムーズに機能しません。途中までスライドして指を離すと不透明度が下がります。しかし、スムーズにスクロールしようとすると、不透明度 100% から直接不透明度 0% になります。これを修正する方法があるかどうか疑問に思いますか??

ありがとう！！

4

4 に答える 4

24

のようなものを試してください

var divs = $('.social, .title'),
    limit = 35;  /* scrolltop value when opacity should be 0 */

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   /* avoid unnecessary call to jQuery function */
   if (st <= limit) {
      divs.css({ 'opacity' : (1 - st/limit) });
   }
});

スクロールトップに達すると、div35pxの不透明度は1 - 35/35 = 0

フィドルの例: http://jsfiddle.net/wSkmL/1/ 更新されたフィドル: http://jsfiddle.net/J8XaX/2/ (オレンジ色の div に書いた効果を実現するために、35 を 130px に変更しました)

于 2012-04-18T06:21:09.397 に答える
7 
var divs = $('.social, .title');
$(window).scroll(function(){
   var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
   divs.css('opacity', 1 - percent);
});

$(document).height() - $(window).height(): スクロール領域
$(document).scrollTop(): 現在のスクロール位置
percent: 現在のスクロール位置 (パーセント)
divs.css('opacity', 1 - percent);: div の不透明度を設定します

この例も参照してください。

于 2012-04-18T06:27:29.957 に答える
4 
var divs = $('.social, .title');
$(window).scroll(function(){
    var fadeval = 1 - ($(window).scrollTop()) / ($(window).height());       
    divs.css({opacity: fadeval});
});​

フィドルのデモ

編集：投稿中に非常に多くの回答が私を打ち負かしました

編集: 2

    var divs = $('.fademe');
$(document).ready(function(){divs.css('opacity', 0);}); //can be done using CSS also
$(window).scroll(function(){

    var percent = $(document).scrollTop() / (35);
    divs.css('opacity', percent);       
});​

更新された JsFiddle

于 2012-04-18T06:28:26.227 に答える
1 
var divs = $('.social, .title'); 
$(window).scroll(function(){
    var p = $(window).scrollTop()/ $(window).height();
    divs.stop().fadeTo("fast",p);
});
于 2012-04-18T06:27:49.027 に答える