Javascript固定滚动定位_Javascript_Jquery_Scroll

Javascript固定滚动定位

javascript jquery scroll

Javascript固定滚动定位,javascript,jquery,scroll,Javascript,Jquery,Scroll,这是我的正如你所看到的，我有侧边栏链接在向下滚动时滚动……但是当你向下滚动到页脚时，链接与页脚重叠，看起来不太好我需要一种方法，使边栏链接只有大约20-30px的屏幕顶部后，我向下滚动（例如，约350px给予或采取一些），然后返回到它的原始位置时，我滚动回来（如果有一种方法可以用css做类似的事情，那将是理想的，但我很确定你不能）运行if语句，测试用户是否一直滚动到底，如果是这种情况，则通过jQuery更新csstop： $('.sidebar').css('top', parseInt(

这是我的

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

我需要一种方法，使边栏链接只有大约20-30px的屏幕顶部后，我向下滚动（例如，约350px给予或采取一些），然后返回到它的原始位置时，我滚动回来

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

运行

if

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

top

：

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

parseInt（$（'.sidebar'）.css（'top'），10）

获取当前的最大值作为一个整数，然后可以添加到该整数，以将侧边栏移动到所需的位置。

运行

if

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

top

：

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

parseInt（$（'.sidebar'）.css（'top'），10）

获取当前的最大值作为一个整数，然后可以将其添加到其中，以将侧边栏移动到所需的位置。

转到上面的链接，查看代码下面的示例

当scrolltop达到35px时，divs的不透明度为1-35/35=0

转到上面的链接，查看代码下面的示例

当scrolltop达到35px时，divs的不透明度为1-35/35=0

您需要创建一个额外的停止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>

您需要创建一个额外的停止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>

我注意到您的

scroll

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

滚动

方法的其他问题，您可能不知道。首先，当我的浏览器是垂直大小的全屏时（我的显示器是1920x1200），我看不到文本链接重叠。当我调整浏览器的高度使其达到75%时，我看到了您描述的问题。当我的浏览器高度为50%时（你自己试试），那么滚动是无限的！更复杂的是，每当你使用浏览器缩放（Ctrl和+）时，无论浏览器窗口的高度如何，滚动方法都会完全中断。你能显示你正在使用的代码吗？我知道。这就是为什么我试图修复它，使其问题更少。我是初学者，所以我知道有很多问题。我不懂任何javascript，所以我只是依靠我在互联网上能找到的东西。您可以通过查看页面源代码来查看代码。这是头标签中的第二个脚本函数。我不想改变任何不透明度。我只想在向下滚动过侧边栏的原始位置后，侧边栏与顶部保持30像素左右的固定距离。我甚至可以不用我目前正在制作的小动画卷轴。谢谢你！尝试用另一个固定高度为30 px的div包装边栏div。这样边栏就不会比它的父div更远了。我不想改变任何不透明度。我只想在向下滚动过侧边栏的原始位置后，侧边栏与顶部保持30像素左右的固定距离。我甚至可以不用我目前正在制作的小动画卷轴。谢谢你！尝试用另一个固定高度为30 px的div包装边栏div。这样侧边栏就不会比它的父div走得更远。

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