Question

我正在努力在滚动时将菜单贴在顶部。我在这里举个例子： https://stackoverflow.com/a/1216130/571723

但是我的菜单位于较小的居中div中。当菜单进入＆＃34;坚持＆＃34;菜单被推到页面的右侧。在顶部。这是我的小提琴：http://jsfiddle.net/edL5F/1/

在将菜单设置为固定时，如何使菜单保留在容器内？

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

你需要左边：150，右边：0到你的功能：

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

这是jsFiddle：http://jsfiddle.net/k49n4/

Answer 2

问题在于，当您向元素添加position: fixed时，它会将元素从文档流中取出。它坚持所有其他保持浮动的元素。

您的right: 0风格为nav。只要它绝对定位，它就会粘在其父母的右侧。

当你将它更改为固定位置时，它也会粘贴在父元素的右侧，在这种情况下是视口。

您可以通过更改固定状态下的位置来修复它：

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

同时检查此updated Fiddle。

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

2 个答案: