我正在寻找一个 HTML5/jquery 解决方案，将浮动 div（让我们称这个 div“A”）附加到父 div（称这个“B”）的右侧，并让 div A 在滚动期间保留在屏幕上，但在滚动时停止它到达 div B 高度的顶部或底部。如果您看到了保留在屏幕上的浮动/绝对定位社交媒体按钮（这是正确的概念），但我想将浮动限制为仅与 div B 的高度一样高或低。
以下是我制作的概念动画概念动画 http://dl.dropbox.com/u/20618553/floating%20div%20concept%20animation.swf
如果您查看 div B，我的目标是让浮动菜单在屏幕上沿其右侧上下滚动 div B 的高度，而不是高于或低于 div B。
非常欢迎任何建议/帮助/代码片段。
先感谢您。
好的，这是我已经实现的脚本。我一直想把它做成一个插件，但我总是忘记这样做，但它很容易定制。
$(window).scroll(function () {
var ntMin = 130;
var newTop = $(window).scrollTop();
if (newTop <= ntMin){
newTop = ntMin;
}
$("#navPane").stop()
.animate({'top': newTop}, "slow");
});
所以这里发生的事情是你正在向 WINDOW OBJECT 添加一个事件处理程序（为什么？因为这样，如果有人在页面完全加载之前开始滚动，则移动的 div 将在页面完成时赶上，因此动画将保持平滑并且在那里不会出现任何样式问题）。然后你声明一个变量，ntMin，您将其设置为您希望移动 div 移动到的最小距离值（从窗口顶部开始测量）。接下来你声明一个变量，newTop，并在页面上的当前滚动位置初始化它。接下来，检查窗口是否移动到足以要求 div 移动的程度。然后执行动画。
我会尽快向您发送演示。我将尝试看看是否可以先向您发送 html 版本。
如果您有任何疑问，请告诉我。
EDIT:
好的，我不只是向您发送演示，而是将页面保存为 htm 页面，用 Lorem Ipsum 替换内容，并将结果添加到我的新开发网站上的页面（它根本不完整 - 提前道歉）。这里是演示链接 http://development.zacharykniebel.com/moving-side-nav-demo/demo-about-me.htm.
由于某种原因，我似乎遇到了一些权限问题，导致我的徽标无法出现在网站上（网站根本不完整哈哈），并且它导致了一个小故障，因为导航开始低于应有的水平，但作为一旦您移动页面，它就会返回到正确的位置。同样的错误导致它的结束也比应有的要低一些，但是，作为一个整体，它仍然达到了它的目的。如果您有任何疑问，请告诉我，祝您好运！ :)
更新：我没有机会为您创建插件，但我给您写了您需要的规范。请注意，我给您的规范并不一定会产生最简单的解决方案 - 这是有意的。我设计它们的方式是让您可以轻松地编写脚本、测试它并自定义/扩展它，以便在将其转换为插件之前添加您需要的任何其他功能。他们来了：
- (I) make a variable to hold the current (will be previous) position of the sliding element
- 每当窗口滚动时，该值都会在代码末尾更新
- 该值将用于帮助确定滚动方向
- (II) make a function to manage the CSS changes of the sliding element
- 该函数将从窗口滚动处理程序中调用
- this function will take an array of values { scrollTop, direction, topStop, bottomStop, ele }
- ele 将是滑动元素的选择器
- 可能想要设计一个可重用的对象来保存这些值
- could take these values and the local variables created in the scroll function
- 可以防止某些功能被多次执行
- 从长远来看可以让事情变得更容易
- 对象将存储在 document.ready 处理程序中的变量中
- function will determine whether to move element or not
- 如果元素的方向是“向下”并且尚未到达 (bottomStop - ele.height()) 移动
- 如果它到达了bottomStop则不要移动（使用ele.css(top:scrollTop)）
- 还必须检查以确保 ele.css("top") > 那个 topStop
- 将上面的内容反转为向上方向
- (III) create the window scroll function:
- 创建局部变量来保存scrollTop的值
- 创建局部变量来保存布尔方向值
- compare the value of scrollTop with the previous position of the sliding element
- 如果值scrollTop较大，则将方向设置为表示“向下”的布尔值
- 否则，将方向设置为指示“向上”方向的布尔值
- 调用II中创建的函数
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
