Trying to make nav menu stick at top of screen when scrolling

Question

I am working on making my menu stick at the top when scrolling. I am following an example here: https://stackoverflow.com/a/1216130/571723

However my menu is inside a smaller centered div. The menu gets pushed over to right side of the page when it goes to "stick" at the top. Here is my fiddle: http://jsfiddle.net/edL5F/1/

How do I make the menu stay inside the container while setting it to fixed?

CSS:

.content-wrapper {
    margin: 0 auto;
    max-width: 800px;
    position: relative;
    background-color: #cccccc;
}

nav {
    position: absolute;
    right: 0;
    top: 63px;
    margin-top: 5px;
    font-size: 1.3em;
    font-weight: 600;
    list-style:none;
    width:628px;
    margin:5px auto;
    height:43px;
    padding:0px 10px 0px 10px;
    z-index: 10;

    /* Rounded Corners */
    /*border-radius: 10px; */

    /* Background color and gradients */
    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    /* Borders */
    border: 1px solid #002232;

    box-shadow: inset 0px 0px 1px #edf9ff;
}

div.divBlock {
    margin: 20px 0;
}

JS:

 $(window).scroll(function (e) {
    $el = $('nav');
    if ($(this).scrollTop() > 80 && $el.css('position') != 'fixed') {
        $('nav').css({ 'position': 'fixed', 'top': '-10px'});
    }
    if ($(this).scrollTop() < 80 && $el.css('position') == 'fixed') {
        $('nav').css({ 'position': 'absolute', 'top': '63px' });
    }
});

Goran.it · Accepted Answer · 2014-02-21T20:14:02.030

2

You need to put left: 150, right: 0 to your function like this :

 $(window).scroll(function (e) {
        $el = $('nav');
        if ($(this).scrollTop() > 80 && $el.css('position') != 'fixed') {
            $('nav').css({ 'position': 'fixed', 'top': '-10px', 'left':'150px', 'right':'0'});
        }
        if ($(this).scrollTop() < 80 && $el.css('position') == 'fixed') {
            $('nav').css({ 'position': 'absolute', 'top': '63px', 'left':'', 'right':'' });
        }
    });

Here is working jsFiddle : http://jsfiddle.net/k49n4/

edited Feb 21 '14 at 20:14

answered Feb 21 '14 at 20:03

Goran.it

5,991
2
23
25

Close. The nav bar still scoots over covering part of the picture when it switches to fixed. – dmikester1 Feb 21 '14 at 20:09
Beautiful! Can you please make that change in your answer above? – dmikester1 Feb 21 '14 at 20:13

score 0 · Answer 2 · answered Feb 21 '14 at 20:22

The problem is that when you add position: fixed to an element, it will take the element out of the document flow. It's sticked above all the other elements that keep their floating.

You have right: 0 in your nav style. As long as it's absolutely positioned, it sticks to the right side of its parent.

When you change it to the fixed positioning, it also sticks on the right of it parent, which is in that case the viewport.

You can fix it by changing the position in the fixed state:

$('nav').css({ 
    'position': 'fixed', 
    'top': '-10px',
    'left': '50%',
    'margin-left': '-250px' /* container width - image width */
});

Also check this updated Fiddle.

Trying to make nav menu stick at top of screen when scrolling

2 Answers2