Question

这是我的site

正如你所看到的，当我向下滚动时，我有侧边栏链接滚动...但是当你向下走到页脚时，链接会与页脚重叠并且看起来不太好。

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

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

Answer 1

运行if语句，测试用户是否一直滚动到底部，如果是这种情况，则通过jQuery更新css top：

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

parseInt($('.sidebar').css('top'), 10)获取当前最高值，然后将其添加到整数中，以将侧边栏移动到所需位置。

Answer 2

reference

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

example fiddle

updated fiddle

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

Javascript固定滚动定位

3 个答案: