滚动时尝试使导航菜单停留在屏幕顶部

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' });
    }
});

Answer 1

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/

Answer 2

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 .