floating div content that tracks along a parent divs height

问题

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

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.

回答1:

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");
    });

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.

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.

EDIT:

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) 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
(II) make a function to manage the CSS changes of the sliding element
- 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
  - object would be stored in variable in document.ready handler
- function will determine whether to move element or not
  - if element's direction is "down" and it has not yet reached (bottomStop - ele.height()) move
  - if it has reached the bottomStop then don't move (using ele.css(top: scrollTop))
  - will also have to check to make sure that the ele.css("top") is > that topStop
- reverse the above for the up direction
(III) create the window scroll function:
- 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
- call the function created in II

来源：https://stackoverflow.com/questions/11705855/floating-div-content-that-tracks-along-a-parent-divs-height

标签

jquery

html5

css-float