Keeping div visible when parent container is visible

It’s possible to keep a div on the same part of the screen with a fixed attribute. I’d like to do something similar, but only when the parent container is visible. That’s because the parent container only becomes visible when the screen is scrolled down. However, the parent container is long enough so that the div that should be visible can scroll off the top.

This may make more sense if you look at the page. I’d like to keep the Shopping Cart box visible whenever any of the Add to cart buttons are visible. You can see it at http://www.qoolery.com/shop.html.

Hmm, sounds like a JavaScript job if you really want that sort of behavior.

Well this could be done in CSS/HTML depending on how you work things. If you hide the add to cart buttons via visibility:hidden or display:none then this could be achieved.
You could nest the fixed element within the add to cart div.

Say you had this (pseudo code)
<addtocartStuff>
<fixed></fixed>
</addtocartStuff

Then assuming display:none was added to addtocartStuff, then fixed would be removed as well :slight_smile:

It just depends on your HTML and if you are willing to change. You want behavior (JS) so JS might provide you more sexy solutions :wink:

Thanks Ralph and Ryan. Using JS is the solution, but Ryan your solution seems like it’s above my head.

I came up with an alternative approach which eliminated the need for scrolling the add-to-cart buttons. The underlying problem was that the page was too long, so I made it shorter by using tabs and hidden divs for the three product sections. It also has a cool fade effect.

My approach probably wouldn’t be the best route to go considering you wanted behavior, I just wanted to throw that out there that it could probably be done with pure CSS :).

Glad you got it sorted htough :slight_smile:

I misunderstood that. I though JS was required. I’d rather use pure CSS, even with my current solution. However, it’s good enough and not worth any more effort.

You would probably need JS at some point in your script so I’d recommend just getting JS a script

In short, I was just rambling lol :slight_smile: