javascript - 我不能用 jquery 以正确的方向扩展 div？

Question

我有一个大标题，里面有一个导航栏。一旦到达标题的底部，导航栏就会自行固定在顶部，使标题与其余内容一起滚动到后面。当您再次向上滚动时，它会弹回到标题中。功能很完善。我有两个问题...

1. 当它捕捉到屏幕顶部时，它会居中(这是我想要的)，但它只有 500 像素左右宽，我希望白色背景延伸到按钮两侧之外到达 body 的边缘(宽度为 960 像素)。当我更改宽度时，它仅从右侧延伸，然后导致它与页面边缘重叠。

2. 尽管它看起来居中，但我确信它偏离了大约 30 个奇数像素。可能是padding或者margin设置？？？

最奇怪的是，当我将代码放到 Web 服务器上供您测试后，导航栏并没有像我在浏览器中打开 HTML 文件时那样正确居中...所以有第三个问题？我如何阻止它这样做？

谢谢你，请帮忙:)

代码在下面，但如果你想看到它的实际效果，你可以访问这里 ( http://www.justletmeusethisnameplz.co.nf/ )。

这是相关的 HTML

<div class="header"> <!-- BEGINNING OF HEADER -->

    <div id="logo"> <!-- BEGINNING OF LOGO -->

    <h1 class="sliding-middle-out">Hi</h1>

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

    <div id="navigation">  <!-- BEGINNING OF NAVIGATION -->

    <div style="float:right"> <!-- BEGINNING OF IDK -->

    <div id="slider"></div>
    <a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a>
    <a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
    <a href="content.html"><div id="three" class="item"><div class="inside">Content</div></div></a>
    <a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>

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

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

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

这是相关的CSS

.header{
        height:100px;
        width:960px; 
        float:left;
        background-color:white;
      }
      #navigation{
        height:40px;
        font-size:20px;
        color:black;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        float:right;
        background-color:white;
        padding-top:5px;
        position:relative;
      }
      #navigation.stick{
        height:40px;
        font-size:20px;
        color:black;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        float:left;
        background-color:white;
        padding-top:5px;
        position:fixed;
      }
      .logo{
        height:100px;
        width:425px; 
        float:left;
      }

这里是相关的 JavaScript/JQuery

<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="./jquery-latest.js"></script>

    <script>
$(document).on("scroll", function(){
    if($(document).scrollTop() > 1){
    $('#navigation').addClass("stick");
    }else{
    $('#navigation').removeClass("stick");
    }
});
</script>

是的，我知道调用了许多 JQuery 库。

Answer 1

因此，您不需要为此使用 jQuery。 CSS 会处理它。

您的第一个宽度问题可以通过将 width:inherit; 添加到 #navigation.stick 来解决，这将应用父级的宽度(在本例中为标题在 960px) 到元素。

下一个问题是 Logo 将导航推了过来。没问题，添加这个 CSS:

#logo{
    position:absolute;
}

这会将其从页面流中分离出来，并允许导航向左移动。

最后是居中。您需要进行一些额外的更改。

#navigation.stick{
    text-align:center;
}

#navigation.stick > div{
    float:none;
}

现在唯一的问题是菜单上的 slider 效果可能会被破坏，因为菜单会四处移动，但这需要更多的修复工作。