CODEWITHSUNDEEP
javascripthtmlcss
Andreas
Andreas

Reputation: 345

CSS/JS content scroll UP instead of down

I'm building a site with the navigation bar stretching across the entire site and it's fixed. Under the navigation bar there is an image, a background image, which is set as a cover. And under the image is the main content.

When you scroll down, the navigation bar covers the image from top to bottom and the main content is now visible, effectively scrolling in a downwards fashion. I would like to "reverse" it. So the navigation is still fixed with the cover image under it but this time, when you scroll down the main content comes up and covers the image from bottom to top. So when you scroll down, the main content scrolls up.

Let's say my image has a 1 at the top and a 2 at the bottom. So, normally when you scroll down the navigation bar covers the image from top to bottom the 1 will disappear and the 2 will be visible until that is also covered. The effect I'm looking for would make the 2 disappear and the 1 would remain in the same place until it is covered by the main content.

I looked into parallax but I'm not sure if that's the right thing to go with. And I have no idea how to do achieve this effect.

Hopefully you'll understand what I'm trying to do here. If you need any more info then just let me know.

Thanks in advance.

EDIT

The effect can be seen on the abduzeedo frontpage

Upvotes: 0

Views: 1365

Answers (2)

Brigand
Brigand

Reputation: 86240

Here's an example with an img element.

Demo

code view

The basic HTML layout:

<nav></nav>
<img src="/image.ext" class="scrollup" />
<div class="main"></div>

Your nav will be positioned fixed, as you said. The image also needs fixed positioning. We set its z-index to -1 to make sure it's covered up.

img {
  position: fixed;
  width: 100%;
  z-index: -1;
  top: 20px; left: 0;
}

The main element is positioned relatively. Because our nav and image both have fixed positioning, the top value is relative to the top of the viewport. 100% means that .main starts as soon as we start scrolling.

.main {
  background: white;
  position: relative;
  top: 100%;
}

Upvotes: 0

MTranchant
MTranchant

Reputation: 485

You need the image to be "attached" to the background ? If so, cannot you just fix it to the background ?

body {
    background-attachment:fixed;
}

Source: http://www.w3schools.com/cssref/pr_background-attachment.asp https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

Note: Be careful using W3Schools, their information is often incorrect, see here.

Upvotes: 2

Related Questions