How to do this

JavaScript
1

Sorry I can’t explain this easily with words, so I got some screen captures to help. I want to do something on my site similar to the AdWords help block that sits towards the top of the page but when you scroll down it stays at the top.

Eg, when looking at the top of the page:

Now, I have scrolled down the page, the help section stays “docked” at the top:

I’m not sure if this is just CSS, or involves JavaScript.

I’m wanting to dock a form like this, in the left column, that is contained in a div with id=“leadsbox”.

Thanks

2

Anybody?

3

I think your search terms are onscroll and scrollTop. :slight_smile:

4

Thanks but does that CSS position fixed work in this scenario? Initially with no scroll the DIV displays about 100 pixels from the top of the top browser edge.

As you scroll down 0-100 pixels the div gets closer to the top of the browser edge (like a normal div would), when you scroll 100+pixels down, then the div stays docked with the very top of the top browser edge. And the reverse happens when you scroll back up.

Makes more sense? Sorry hard to explain :slight_smile:

5

You seem to have omitted the screen captures. :slight_smile:

6

Yes that makes sense.
I wouldn’t know how to do that using CSS (maybe someone else does?), so you probably need javascript :slight_smile:

7

I’m viewing this from the office - I guess the captures are blocked by the firewall. :lol:

8

You can use CSS’s position: fixed for this
Note that that doesn’t work in IE6, but there are forkarounds for that.

Alternatively you could use a javascript function that updates the position of the block when scrolling. That also works in IE6. For an example (and there a many others if you search for them using your favorite search engine): here.

PS. Screen captures are showing for me too

9

Really? Screen captures are showing for me.

10

Thanks, any other ideas?