CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul
Paul

Reputation: 3368

Scrolling fixed header displays farther down then desired

I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.

I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.

I created a fiddle to show what it is doing.

https://jsfiddle.net/zoue6gv7/

This worked until I added my top margin to my div id join_login. It now is that far away from the top.

#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}

How can I get this header to stay fixed at the top after I get to my scroll point?

Upvotes: 2

Views: 36

Answers (3)

CodeLyfe
CodeLyfe

Reputation: 250

Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:

  • Use position: fixed; to tell the header to stay in the same location regardless of scrolling

  • Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page

    header {

    position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;

    }

Upvotes: 0

CodeLyfe
CodeLyfe

Reputation: 250

This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px

#logo {
    position: absolute;
    left: 15%;
    top: 22px;
    font-size: 2em;
    margin-top: -15px;
}

Upvotes: 0

AtheistP3ace
AtheistP3ace

Reputation: 9691

Is this what you want? https://jsfiddle.net/zoue6gv7/1/

I just removed the margin-top -50px and replaced it with

top: 0;

Upvotes: 2

Related Questions