Forums

wadem

Hi all,

I need to make a one page scrolling site with a static nav bar at the stop. I can get the scrolling and page jumping happening all fine but the nav bar then covers the "page" I want to view. Here is a code pen of my progress: http://codepen.io/anon/pen/uekBm

I want it to work like this however this I am sure this is using a bunch of jquery which I don't know how to use yet. http://edenpulse.com/

Is this possible with css only or should I get my hands dirty with some jquery scripts?

Thanks Wade

irksum

Hey Wade, how kind of browser support do you need?

CrocoDillon

`<div id="about" class="page">
    About page content goes here.
</div>
<div id="portfolio" class="page">
    Portfolio page content goes here.
</div>
<div id="contact" class="page">
    Contact page content goes here.
</div>`

and

.page {
  height: 500px;
  padding-top: 80px;
}

#about {background: blue;}
#portfolio {background: green;}
#contact {background: red;}

Not sure if there is a better CSS way to do it.

wadem

I'm not too worried about old versions of IE or anything.

wadem

@CrocoDillon This is perfect! I feel silly for not thinking of that.

CrocoDillon

Hehe, no problem :)

irksum

here's the link for Chris's snippet on scrolling to a position

Paulie_D

I need to make a one page scrolling site with a static nav bar at the top.

... but the nav bar then covers the "page" I want to view.

I don't get it....you have the nav you wanted and now you don't want it?

wadem

@Paulie_D

I just wanted a floating nav bar at the top and it was covering my content. Updated the pen now with @CrocoDillon suggestion.

Paulie_D

Nope...still don't get it unless you've changed the size of it or moved it in the DOM....it's still at the top and covers any content that scrolls up underneath it.

Still, if you are happy....

treehouse : what would you like to learn today?

Forums

One page scroll site