JQUERY：为什么向下滚动时我的导航没有固定在顶部？答案

【问题标题】：JQUERY: why isn't my nav fixed to the top when scrolling down?JQUERY：为什么向下滚动时我的导航没有固定在顶部？
【发布时间】：2014-09-10 11:36:03
【问题描述】：

当您向下滚动页面 100 像素时，我的导航栏不会固定在顶部。然后当向上滚动时，它会恢复到正常状态。

我已经设法让导航栏在滚动时变得固定和不固定，但它不在正确的位置。它固定在页面下方和左侧，而不是在顶部并浮动到右侧。

这是我在 jsfiddle 上制作的示例供您查看。

http://jsfiddle.net/edL5F/20/

       <div id="wrapper">
            <div id="codeback">
            </div>
            <div id="container">

                 <div class="nav">
                 </div>
                 <div id="wrap">

                 </div>
            </div><!-- END OF CONTAINER -->

       </div>


 body{
    background-color:black;
}

    #wrapper{
        width:100%; 
        height:inherit;
    }
    #codeback{
        width:100%;
        height:100%;
        background-image:url('capture.jpg');
          background-repeat: no-repeat;
        position:fixed;
        left:0px;
        top:0px;
        z-index:-1;

    }
    #container{
        width:100%;
        float:right;
    }
    .nav{
        margin-top:100px;
        width:80%;
        height:50px;
        float:right;
        background-color:blue;
        position:relative;
    }


    #wrap{
        float:right;
        width:80%;
        height:1500px;
        background-color:white;
    }





 $(window).scroll(function (e) {
    $el = $('.nav');
    if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
        $('.nav').css({ 'position': 'fixed', 'top': '0'});
    }
    if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
        $('.nav').css({ 'position': 'relative'});
    }
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以通过课堂轻松做到...

$(window).scroll(function (e) {
    $el = $('.nav');
    if ($(this).scrollTop() > 100) {
        $('.nav').addClass("fixedNav");
    }else {
        $('.nav').removeClass("fixedNav");
    }
});

.fixedNav {
    position:fixed;
    margin:0;
    width:100%;
}

这里是小提琴：http://jsfiddle.net/yss9hz0v/

【讨论】：

【解决方案2】：

float:right 在位置为fixed 时没有任何影响。因此，当您将元素设置为位置 fixed 时，您必须设置 right:0px。

最后，每次将元素位置从 fixed 更改为 relative 到 0px 和 100px 时，您都必须更改 margin-top 分别

试试：

$(window).scroll(function (e) {
    $el = $('.nav');
    if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
        $('.nav').css({ 'position': 'fixed', 'top': '0','right':'0','margin-top':'0px'});
    }
    if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
        $('.nav').css({ 'position': 'relative','margin-top':'100px'});
    }
});

DEMO

【讨论】：

【解决方案3】：

这是我的解决方案：

从.nav 中删除margin-top
将padding-top:100px 添加到#container
编辑 jquery。

jquery：

$(window).scroll(function (e) {
    $el = $('.nav');
    if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
        $('.nav').css({ 'position': 'fixed', 'top': '0','right':'0'});
    }
    if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
        $('.nav').css({ 'position': 'relative','margin-top':'100px'});
    }
});

这是fiddle。

说明： right:0 是在修复后将.nav 附加到右侧。

填充更改的边距是在您向上滚动时强制栏返回到其原始位置，而不编辑任何 css。

【讨论】：

【解决方案4】：

因为 .nav 元素的 css 属性中有一个 margin-top: 100px;...

小提琴：http://jsfiddle.net/edL5F/24/

【讨论】：