Menu
This is a bit too tricky for my jQuery / javascript knowledge so i'm sorry to say i haven't really tried anything yet. I need some hints to get pointed in the right direction!
The problem is that i have a fixed element on my page, and when scrolling down this element will enter different wrappers, and while in that wrapper i need a smaller child element to "snap" to my fixed element and while it's in the element.
Kind of hard to explain, i made a static mockup here:
http://jsfiddle.net/ycmYc/
When "fixed cart button" reaches a price, i need it to attach and scroll with the cart button as long as it's inside the prices "product-div". When it leaves and enters the next the price should stay in the bottom of it's product and then snap to the cart-button again when the users is reaching it by scrolling up.
Well, again, sorry for not having tried anything but i am lost. If i had to do this without any help i think i'd go with waypoints.js but it feels far from optimal.
Any help MUCH APPRECIATED!
The fixed element will always have the same position, so i guess offset from the browser top could be used instead of keeping track of it's position. Always something ;)
Update:
Been working on it myself, and got it working downwards but not upwards:
Should clarify what i mean:
http://retype.se/temp/scrolltest/test.html
When scrolling by the price, it joins the button downwards and snaps loose when leaving the container. My problem now is making it snap to it and scroll back to its original position when scrolling upwards :)
588
The scrollIntoView method: The scrollIntoView() is used to scroll to the specified element in the browser. Example: Using scrollIntoView() to scroll to an element.
To make an element sticky, do: make_sticky('#sticky-elem-id'); When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element. It also returns the sticky element to its original non-sticky position when scrolling back above it.
scroll() The scroll() method of the Element interface scrolls the element to a particular set of coordinates inside a given element.
To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element. This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.
Do you want it like this?
http://jsfiddle.net/ycmYc/39/
only result: http://fiddle.jshell.net/ycmYc/39/show/light/
updated:
How about this?
http://jsfiddle.net/ycmYc/93/
only result: http://fiddle.jshell.net/ycmYc/93/show/light/
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
