Question

我正在寻找一个HTML5 / jquery解决方案，将浮动div（让我们称之为“A”）连接到父div的右侧（称为“B”）并在滚动期间让div A停留在屏幕上但是当它击中div B高度的顶部或底部时停止。如果您已经看到浮动/绝对定位的社交媒体按钮保留在屏幕上（它是正确的概念），但我想约束浮动只能达到与div B的高度一样高或低。

以下是我制作的概念动画 Concept Animation

如果你看看div B，我的目标是让浮动菜单在屏幕上向上和向下滚动div B的高度，而不是高于或低于div B.

非常欢迎任何建议/帮助/代码剪辑。提前谢谢。

Answer 1

好的，这是我实施的脚本。我一直想将它变成一个插件，但我一直忘记这样做，但它很容易定制。

    $(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替换了内容，并将结果添加到我的新开发网站上的页面（它并非完全完整 - 道歉，而不仅仅是向您发送演示。提前时间）。这是link to the demo。

出于某种原因，我似乎有一些权限问题阻止我的徽标出现在网站上（网站不是完全哈哈），并且它导致一个小故障，因为导航开始低于它应该，但是一旦你移动页面，它应该返回到正确的位置。同样的错误导致它结束的程度也低于它应该的结果，但是，作为一个整体，它仍然有用它的目的。如果您有任何问题和好运，请告诉我！：）

更新：我没有机会为你创建插件，但我写了你需要的规格。请注意，我给你的规格不一定产生最简单的解决方案 - 这是故意的。我以这样的方式设计它们，您可以轻松编写脚本，测试它，并自定义/扩展它，以便在将其转换为插件之前添加所需的任何其他功能。他们在这里：

（I）创建一个变量来保持滑动元素的当前（将是前一个）位置
- 每当窗口滚动时，此值将在代码结尾处更新
- 此值将用于帮助确定滚动方向
（II）创建一个管理滑动元素的CSS变化的功能
- 将从窗口滚动处理程序
- 此函数将采用一系列值{scrollTop，direction，topStop，bottomStop，ele}
  - ele将成为滑动元素的选择器
  - 可能想要设计一个可以重用的对象来保存这些值
  - 可以获取这些值以及在scroll函数中创建的局部变量
    - 可以防止某些功能被多次执行
    - 可以让事情变得更容易
  - 对象将存储在document.ready handler
- 函数将决定是否移动元素
  - 如果元素的方向是“向下”并且尚未到达（bottomStop - ele.height（））移动
  - 如果它已经到达bottomStop然后不移动（使用ele.css（top：scrollTop））
  - 还必须检查以确保ele.css（“top”）是＆gt; topStop
- 向上反转上行方向
（III）创建窗口滚动功能：
- 创建局部变量以保存scrollTop的值
- 创建局部变量以保持布尔方向值
- 将scrollTop的值与滑动元素的先前位置进行比较
  - 如果值scrollTop更大，则将方向设置为指示“向下”的布尔值
  - 否则，将方向设置为指示“向上”方向的布尔值
- 调用在II

沿父div高度跟踪的浮动div内容

1 个答案: