Scroll-Over Effect with 100% width elements

[deldalton]

Hello.

Here’s my CodePen … Scroll-Over Effect Example

When you first open the browser, maximised, you should see a splash image in the middle of the screen. If you scroll down the page, the content area (that’s the red bit) appears to ‘scroll-over’ the splash image. This works as intended.

As you change the width of the browser, you’ll notice that the splash image is also resized, proportionally. This also works as intended.

However, there is a problem, and I’m not sure how to resolve it.

As the splash image gets smaller, you’ll eventually notice that a white gap begins to appear between the image and the content area. I would like it so that the content area sits at the very bottom of the image but still maintains it’s ability to ‘scroll-over’ the image when I move down the page.

My problem here is that the content area has a top margin that pushes it so many pixels down the page. But, of course, at different resolutions this presents different results when maximised.

Obviously, I need to find a responsive way (presumably using percentages?) that will allow the content area to also resize with the width of the browser.

I’m really struggling to produce the results I’m looking for.

Can anyone provide any insight?

With many thanks,

Del

[Paulie_D]

You should try adding a bottom value

#splashContainer {
z-index: -2;
overflow: hidden;
background-color: black;
width: 100%;
height: auto;
top: 0;
left: 0;
bottom: 0; /* like this */
position: fixed !important;
}

Tha may have knock on consequences but it seems to extend the bg color as required.

[deldalton]

shaneisme. Thank you for your response. I did think that JS would be the obvious solution but I’m hoping to achieve a pure CSS solution. However, I’ll keep this in mind if I don’t find any other solution.

Paulie_D. I will have a look into your suggestion. I’ll let you know if I stumble into any problems caused by it.

I hope to get back to you all this evening, at the latest, with my findings but I may not have the opportunity until tomorrow.

[deldalton]

Paulie_D. I have added your bottom: 0; suggestion to the Pen Scroll-over Effect Example. I’ve also changed the picture, as it wasn’t giving an accurate idea of how the rest of the page then interacts with the image.

What you should now see, when reducing the browser’s width, is that the image resizes proportionally (I’ve also noticed that it rides up slightly but I know how to sort that, so that’s not the problem) and although there is no longer a ‘gap’ between the splash container and the content it is still an empty space that I cannot use in the way I would like.

What I’m trying to achieve is to have the content area (the red bit at the bottom) to appear to stick to the bottom of the splash image, while still maintaining the scroll-over effect.

I’m starting to think that it’s not possible to maintain the scroll-over effect.

I may just have to resort to keeping the header fixed, but have the rest of the content scroll under the header.

[deldalton]

Actually! I do expect to be able to use media queries to solve this issue.

I’ll have a play and update you all.

[Author]

Posts