沿父div高度跟踪的浮动div内容
我正在寻找一个HTML5 / jquery解决方案来附加一个浮动div（让我们称之为“A”）到父div的右侧（称为“B”）并让div A在滚动期间停留在屏幕上但在停止时停止它击中了div B高度的顶部或底部。 如果您已经看到浮动/绝对定位的社交媒体按钮保留在屏幕上（它是正确的概念），但我想限制浮动仅与div B的高度一样高或低。
以下是我制作概念动画的概念动画
如果你看看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版本。
如果您有任何疑问，请告诉我。
编辑：
好吧，我只是将页面保存为htm页面，用Lorem Ipsum替换了内容，并将结果添加到我的新开发站点上的页面（它并非完全完整 - 提前道歉），而不仅仅是向您发送演示。 ）。 这是演示的链接 。
出于某种原因，我似乎有一些权限问题阻止我的徽标出现在网站上（网站不是完全哈哈），并且它导致一个小故障，因为导航开始低于它应该，但作为移动页面后，它应立即返回到正确的位置。 同样的错误导致它结束的程度也低于它应该的结果，但是，作为一个整体，它仍然起到了它的作用。 如果您有任何问题和好运，请告诉我！ 🙂
更新：我没有机会为你创建插件，但我写了你需要的规格。 请注意，我给你的规格不一定产生最简单的解决方案 - 这是故意的。 我以这样的方式设计它们，您可以轻松编写脚本，测试它，并自定义/扩展它，以便在将其转换为插件之前添加所需的任何其他function。 他们来了：
- （I）制作一个变量来保持滑动元件的当前（将是前一个）位置
- 每当窗口滚动时，该值将在代码结束时更新
- 此值将用于帮助确定滚动方向
- （II）创建一个管理滑动元素的CSS变化的function
- 将从窗口滚动处理程序调用此函数
- 这个函数将采用一系列值{scrollTop，direction，topStop，bottomStop，ele}
- ele将是滑动元素的选择器
- 可能想要设计一个可以重用的对象来保存这些值
- 可以采用这些值和滚动函数中创建的局部变量
- 可以防止某些function被多次执行
- 从长远来看可以让事情变得更容易
- object将存储在document.ready处理程序中的变量中
- 函数将决定是否移动元素
- 如果元素的方向是“向下”并且尚未到达（bottomStop - ele.height（））移动
- 如果它已到达bottomStop然后不移动（使用ele.css（顶部：scrollTop））
- 还必须检查以确保ele.css（“top”）是> topStop
- 向上反转上行方向
- （三）创建窗口滚动function：
- 创建局部变量以保存scrollTop的值
- 创建局部变量以保存布尔方向值
- 将scrollTop的值与滑动元素的先前位置进行比较
- 如果值scrollTop更大，则将方向设置为指示“向下”的布尔值
- 否则，将方向设置为指示“向上”方向的布尔值
- 调用II中创建的函数