javascript - Javascript 固定スクロール位置

Question

これは私のサイトです

ご覧のとおり、下にスクロールするとサイドバーのリンクがスクロールします...しかし、フッターまで下に行くと、リンクがフッターに重なって見栄えがよくありません。

下にスクロールした後、サイドバーのリンクが画面の上部から約 20 ～ 30 ピクセルの位置にあり (たとえば、約 350 ピクセルのギブまたはテイク)、上にスクロールすると元の位置に戻るようにする方法が必要です。

（cssだけでこのようなことができる方法があれば理想的ですが、できないと確信しています）

Answer 1

ユーザーが一番下までスクロールしたかどうかをテストするステートメントを実行し、ifその場合はtopjQueryを介してcssを更新します。

$('.sidebar').css('top', parseInt($('.sidebar').css('top'), 10) - 'value to shift by' + 'px');

parseInt($('.sidebar').css('top'), 10)現在の最上位値を整数として取得し、これに追加して、サイドバーを目的の位置に移動します。

Answer 2

参照

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

上記のリンクに移動し、コードの下の例を見てください。

scrolltopが35pxに達すると、divの不透明度は1-35/35=0になります。

フィドルの例

更新されたフィドル

Answer 3

スクロール div をさらにスクロールしないようにする追加の停止 div を作成する必要があります。フィドルを作成しました。理解を深めるのに役立つかもしれません。

HTML

<div id="fixeddiv">
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
     Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>

    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    <div id="scrollstopdiv"></div>
    Demo 3<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>

    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
    Demo 1<br/>
</div>
<div id="scrollingDiv">scrolling div</div>

JS

$().ready(function() {
        var $scrollingDiv      = $("#scrollingDiv");

         var tksheight         = $("#scrollingDiv").height();
        var tksposition      = $("#scrollstopdiv").position();

        var stopdiv = tksposition.top - (tksheight+400);//adjust position to stop scrolling 

   $(window).scroll(function(){            
   if($(window).scrollTop() > 5 && $(window).scrollTop() < stopdiv){    <!-- -->
                $scrollingDiv
                .stop()
                .animate({"paddingTop": ($(window).scrollTop()+300) + "px"}, "slow" );
            }
        });
    });

CSS

#fixeddiv {width:50px;float:left;padding-right:130px;}
#scrollingDiv{float:left;width:150px;}

jsフィドル