Align div to bottom of screen until bottom of div is higher

HTML & CSS
1

HI,
probably not all that hard once i know how but i am wanting a down arrow for each of my divs (they are ~1000px high each). On a large screen they would be fine sitting at the bottom center of the div but on a laptop they would be hidden below the fold so i want the div to align to the bottom of the screen but if the user scrolls the div would stay until the parent div moves above the screen. The div would then move up with the parent div.

I’ve seen it done but don’t know what it’s called to search for code examples. If anyone has any code or can point me to a tutorial that would be much appreciated.

thanks

2

I’m afraid I can’t really picture the exact behavior you want. Could you do some googling to find a demo of this?

3

Hi,
can’t seem to find an example of exactly what i want but i was looking at this http://www.greensplashdesign.com/ and you’ll see that each section has a green down arrow icon in the center.

On my laptop this is not visible as it is aligned to the bottom of the section (which is below the ‘fold’). What i would really like is that the arrow icon be visible by aligning to the screen bottom but once you start scrolling and the section reaches the bottom of the screen then the icon moves up with the section and is no longer fixed to the screen bottom.

I don’t know if this could be done in pure css or whether JS would need to be involved.

thanks

4

Sounds like you are looking for a sticky scroll effect.

5

awesome thank you thats exactly what i was looking for. Didn’t know the name to be able to easily google.

6

next question… anyone know how to make the sticky fire before the top of the screen. I have an 85px fixed menu at the top of the screen and the sliding sticky moves behind this before it stops as the page scrolls. I’ve had a play but can’t find the correct part in the JS to get it to stop 85px short of the top.

thanks

7

Do you have a link to the page in question as it will be easier to debug?

Are you using the sticky from the link I posted as it looks like you could adjust/detect/alter the top position there.

 if (top < 0) {      // above the top edge of the viewport      if (edge > height) {        // not touching the bottom edge of its boundary        item.style.position = "fixed";        item.style.top = "0px";
8

i did try playing with that but i’ve found that it ‘jumps’ into that position as it scrolls rather than a smooth stop.

I’ve chucked my page here http://www.mcsuk.org/test/index_sticky.php but it is really patchy at the moment as it was a really rough draft and some of the image links are now missing as i had to take it out of my secure area, but hopefully you can see what i mean. At the moment i was just getting the example stuff to work at the top. So the RHS panel should be the sticky.

many thanks

9

Its asking for a username and password.

If I click cancel it still goes to a page but I’m not sure its the one you are talking about as there is a sticky column on the left and you mentioned it was the rhs that was sticky,

(I have to go out in a minute so will check back later or perhaps Ryan will jump back in.)

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.