Saturday, August 25, 2012

javascript – How to scroll an element inside parent when a fixed element passes?

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 :)






Rating: 4 out of 5 based on 4 ratings



The post javascript – How to scroll an element inside parent when a fixed element passes? appeared first on Javascript ASK.






via Javascript ASK http://javascriptask.phpfogapp.com/javascript-how-to-scroll-an-element-inside-parent-when-a-fixed-element-passes.html

No comments:

Post a Comment