How do I position a div so that will flow with the content of the page normally when scrolled down, but stops when at the top of the browser window and hovers over the scrolling page content like a "position: fixed" styled element? It's a container for a shopping cart that has to be visible while scrolling, but below the header branding.

I've seen the effect many times but can't find a good example, the link below used to have the behavior on the summary box but I think it's broken in FF3 now.

http://w3-markup.com/order

9 answers

2
points
This was chosen as the best answer

I've done this a couple of times myself, and I've always based my javascript on Derek Allard's approach, which he has written a blog post about.

It uses a little bit of javascript and CSS to get the job done. There is currently no way to do this exclusively with CSS.

Answered over 7 years ago by Mads Kjaer
Alex Holt 341
3
points

I imagine it's using javascript. I can't think of a good way to do this using pure css.

YUP: just checked.. if you disable javscript on the page you linked, it stops moving.

i did a similar thing for kingtray.com - in the right menu.. (uses jquery)

Answered over 7 years ago by Alex Holt
2
points

This is orthogonal to your question, but if you are already using jQuery then you can use that to get the effect you want, and you won't be adding much additional overhead to your code.

There is a tutorial for creating a floating menu with jQuery & CSS here. You should be able to easily adapt this to your needs.

ASP is server-side and won't really effect site performance unless your server/DB is slow and/or you are not doing any caching. There are a number of excellent tools and tutorials on optimizing your client side code for speed.

Answered over 7 years ago by Darren Newton
0
points

There is really simple CSS solution: div#your-floating-div {position: fixed; height: 300px; width: 300px; left: 100px; top: 100px;}

It will work on every browser but IE6. I have custom solution for IE6 but it's hard to put whole solution here I guess. It semi-CSS semi-JS (using CSS expression).

There is an article about IE6 position: fixed emulation: http://www.mauzon.com/?p=89

Answered over 7 years ago by Alex Mauzon
0
points

Ahhhh, I knew that was possible in a very simple way using exclusivelly CSS. I hope this be helpfull to you:

http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx

I used here and... BAZINGA!

Answered over 6 years ago by Acchile Biagioli
0
points

No luck with your example Mauzon, it just positions the div as normal, I need it to scroll with the header above it but stop at the screen top. I'm going to try Darrens jquery tutorial. Jere's the HTML if anyon is interested:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
* { margin:0; padding:0;} 
#wrapper {margin:0 auto; width:900px;}
#your-floating-div {position: fixed; height:100px; width: 900px; background:#009900; top:  80px;}
#header {height: 80px; width:900px; background:#CC0000;}
#content {height: 1080px; width:900px; background:#CCCCCC;}
</style>
</head>

<body>
<div id="wrapper">
    <div id="header">header</div>
    <div id="your-floating-div">Floating Menu</div>     
    <div id="content">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>

    </div>

</div>
</body>
</html>
    enter code here
Answered over 7 years ago by Neworder
0
points

Thanks Alex, I'm sure I've seen a simple method using CSS though, where the positioning of the header somehow pushes the fixed div down when scrolling past the top of the browser.

Answered over 7 years ago by Neworder
Alex Holt 341
0
points

i'd love to be proven wrong.. but i'm 99.9% sure that what you're suggesting is impossible in CSS...

Answered over 7 years ago by Alex Holt
0
points

Looks like you were right Alex, this Slashdot example also uses javascript. I was hoping to avoid it as there as there's a lot of ASP, jquery and javascript on the page already and I want to keep the UI fast. Thanks again.

http://news.slashdot.org/news/08/09/10/2257242.shtml

Answered over 7 years ago by Neworder