web-dev-qa-db-ja.com

スクロールバーの位置に基づくDivの不透明度

スクロールバーが特定の位置に達したときに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％の不透明度。そして、その間のすべての段階でスムーズにフェードします。

ありがとう！

更新：それらのほとんどがかなりうまく機能するすべての助けに感謝します、しかし私は本当にそれが35pxの範囲内で機能する必要があります。そこで、どのように機能するかを非常に明確にする新しい例を作成しました。
http://jsfiddle.net/J8XaX/1/

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

ありがとう！

javascriptjqueryscrollbaropacityfade
13
user433575

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

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) });
   }
});

スクロールトップが35pxに達すると、divの不透明度は1 - 35/35 = 0になります。

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

24
Fabrizio Calderan
_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の不透明度を設定します

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

7
scessor
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

4
Ghokun
var divs = $('.social, .title'); 
$(window).scroll(function(){
    var p = $(window).scrollTop()/ $(window).height();
    divs.stop().fadeTo("fast",p);
});
1
gion_13