Javascript固定滚动定位答案

【问题标题】：Javascript fixed scrolling positioningJavascript固定滚动定位
【发布时间】：2012-07-24 14:15:58
【问题描述】：

这是我的site

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

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

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

【问题讨论】：

我注意到您可能不知道的 scroll 方法的其他问题。首先，当我的浏览器在垂直尺寸上为全屏时（我的显示器为 1920x1200），我看不到文本链接重叠。当我调整浏览器的高度使其高度为 75% 时，我看到了您所描述的问题。当我的浏览器高度为 50% 时（您自己试试），那么滚动是无限的！更复杂的是，每当您使用浏览器缩放（Ctrl 和 +）时，无论浏览器窗口的高度如何，滚动方法都会完全中断。
你能显示你正在使用的代码吗
是的，我知道这些。这就是为什么我试图修复它以减少问题。我是初学者，所以我知道有很多问题。我不知道任何 javascript，所以我只是依靠我在 Internet 上可以找到的内容。您可以通过查看页面源代码来查看代码。它是 head 标签中的第二个脚本函数。

标签： javascript jquery scroll

【解决方案1】：

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

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

parseInt($('.sidebar').css('top'), 10) 以整数形式获取当前顶部值，然后您可以将其相加，以将侧边栏移动到所需位置。

【讨论】：

【解决方案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

【讨论】：

我不想改变任何不透明度。在我向下滚动到侧边栏的原始位置后，我只希望侧边栏保持固定在距离顶部 30 像素左右的位置。我什至可以不用我目前正在做的小动画卷轴。不过谢谢！
尝试用另一个固定高度为 30 像素的 div 包裹侧边栏 div。这样侧边栏不会比它的父 div 走得更远。

【解决方案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>

$().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

【讨论】：