javascript - Javascript固定滚动定位

Question

这是我的网站

如您所见，当我向下滚动时，侧边栏链接会滚动……但是当您向下直至页脚时，链接会与页脚重叠并且看起来不太好。

我需要一种方法，以便在我向下滚动后侧边栏链接距离屏幕顶部仅约 20-30 像素（例如，大约 350 像素给予或接受一些），然后在我向上滚动时返回其原始位置。

（如果有一种方法可以只用 css 做这样的事情，那将是理想的，但我很确定你不能）

Answer 1

运行一条if语句来测试用户是否一直滚动到底部，如果是这种情况，则top通过 jQuery 更新 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;}

jsFiddle