浮动div内容，沿着父divs高度跟踪 [英] floating div content that tracks along a parent divs height

问题描述

我正在寻找一个HTML5 / jquery解决方案来附加一个浮动的div（让我们称这个divA）到父div的右侧（称为B），并有div A在屏幕上滚动但当它撞击div B的高度的顶部或底部时停止。如果你已经看到浮动/绝对定位的社交媒体按钮保持在屏幕上（它的正确的概念），但我想约束的浮动只有高或低的div B的高度。

I am looking for an HTML5 / jquery solution to attaching a floating div (lets call this div "A") to the right side of a parent div (call this "B") and have div A stay on screen during scrolling but stop when it hits the top or bottom of div B's height. If you have seen the floating/absolute positioned social media buttons that stay on screen (its the right concept) but I want to constrain the float to only go as high or low as div B's height.

以下是我做的概念动画
概念动画

The following is a concept animation I made Concept Animation

如果你看看div B，我的目标是让浮动菜单在屏幕上上下滚动div B的高度

if you look at div B my goal is to get the floating menu to scroll on screen up and down div B's height along its right side and not go above or below div B.

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

Any advice / help / code snips are greatly welcome. Thank you in advance.

推荐答案

好的，这里是我实现的脚本。我已经有意义使它成为一个插件，但我仍然忘记这样做，但它很容易自定义。

Okay, here is the script that I have implemented. I've been meaning to make it into a plugin, but I keep forgetting to do so, but it's very easy to customize.

    $(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移动。然后你执行动画。

So what's happening here is you are adding an event handler to the WINDOW OBJECT (why? because this way if someone starts scrolling before the page is fully loaded the moving div will catch up whenever the page finishes, thus the animation will stay smooth and there won't be any styling glitches). Then you are declaring a variable, ntMin, which you set to be the minimum distance value (measured from the top of the window) that you want the moving div to be moved to. Next you are declaring a variable, newTop, and initializing it at the current scroll location on the page. Next, you check if the window moved enough to require the div to move. Then you perform the animation.

我会尽快给你演示。我将尝试看看我是否可以首先发送一个html版本。

I will send you the demo ASAP. I'm going to try to see if I can just send you an html version first.

如果您有任何问题，请与我们联系。

Let me know if you have any questions.

编辑：

好的，而不仅仅是发送演示，我刚刚将页面保存为htm页面，用Lorem Ipsum替换内容，并将结果添加到我的新开发网站上的一个页面（它不是全部完成 - 提前道歉）。以下是演示的链接。

Okay, rather than just sending you the demo, I just saved the page as an htm page, replaced the content with Lorem Ipsum, and added the result to a page on my new development site (it's not AT ALL complete - apologies ahead of time). Here is the link to the demo.

出于某种原因，我似乎有一些权限问题，阻止我的标志出现在网站上（网站的不是完全哈哈），它导致一个小毛刺，导航开始低于它应该，但一旦你移动页面，它应该返回到正确的位置。同样的错误导致它结束比它应该的一点，但是，作为一个整体，它仍然服务于它的目的。让我知道如果你有任何问题和祝你好运！ ：）

For some reason, I seem to be having some permissions issue that is preventing my logo from appearing on the site (site's NOT AT ALL complete haha), and it's causing a minor glitch in that the nav is starting lower than it should, but as soon as you move the page it should return to the right position. The same bug is causing it to end a little lower than it should as well, but, as a whole, it still serves its purpose. Let me know if you have any questions and good luck! :)

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

UPDATE: I didn't have a chance to create the plugin for you, but I wrote you the specifications for what you will need. Note that the specifications that I gave you do not necessarily produce the simplest solution - this was intentional. I designed them in such a way as you could easily write the script, test it, and customize/expand it in order to add any other features that you need before you convert it into a plugin. Here they are:

• （I）做一个变量来保存滑动元素的当前位置 li>
  

• (I) make a variable to hold the current (will be previous) position of the sliding element
  • whenever the window scrolls, this value will be updated at the end of the code
  • this value will be used to help determine direction of scrolling
  
  
  • 此函数将从窗口滚动处理程序中调用
  
  
  • 此函数将获取一个值数组{scrollTop，direction，topStop，bottomStop，ele}
    
    
    
    • ele将是滑动元素的选择器
    
    
    • 可能想设计一个可以容纳这些值的对象
    
    
    • 使用这些值和在滚动函数
      
      
      
      • 中创建的局部变量可以防止一些函数执行多次
      
      
      • 长期
      
      
      • this function will be called from the window scroll handler
      • this function will take an array of values { scrollTop, direction, topStop, bottomStop, ele }
        • ele will be the selector for the sliding element
        • may want to design an object to be reused that will hold these values
        • could take these values and the local variables created in the scroll function
          • could prevent some functions being performed multiple times
          • could make things easier in long run
          
          
          • 如果元素的方向是下，并且尚未达到（bottomStop - height（））移动
          
          
          • 如果已达到bottomStop，则不移动（使用ele.css（top：scrollTop））
          
          
          • 也必须检查以确保ele.css（top）> topStop
          
          
          
          
          • 保存scrollTop的值
          
          
          • 创建局部变量以保存布尔方向值
          
          
          • 将scrollTop的值与滑动元素的上一个位置进行比较
            
            
            
            • 如果值scrollTop较大，请将方向设置为指示向下的布尔值
            
            
            • 否则，将方向设置为布尔值， up方向
            
            
            • create local variable to hold value of scrollTop
            • create local variable to hold boolean direction value
            • compare the value of scrollTop with the previous position of the sliding element
              • if the value scrollTop is greater, set the direction to the boolean indicating "down"
              • otherwise, set the direction to the boolean indicating the "up" direction

              这篇关于浮动div内容，沿着父divs高度跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！