Question

我有一个带有导航栏的大标题。一旦到达标题的底部，导航栏就会自动固定在顶部，使标题与其余内容一起向后滚动。再次向上滚动时，它会重新回到标题中。功能非常完美。我有两个问题......

当它在屏幕顶部拍摄时，它会居中（这就是我想要的），但它只有500像素左右宽，我希望白色背景延伸到按钮之外的任何一侧到达身体的边缘（宽度为960像素）。当我改变宽度时，它只从右侧延伸，然后使其与页面边缘重叠。
即使它看起来是居中的，但我确信它的亮度约为30像素。它可能是填充或边距设置???

最奇怪的是，一旦我将代码放到网络服务器上进行测试，导航栏就像我在浏览器中打开HTML文件一样正确的中心...所以＆那里＆＃39; SA第三个问题？我如何阻止它做这件事？

谢谢你，请帮助：）

代码如下所示，但如果您希望看到它的实际效果，可以访问此处（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会处理它。

宽度的第一个问题可以通过将<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='box'> <div class='circle'></div> </div> <div class='box'> <div class='circle'></div> </div> <div class='box'> <div class='circle'></div> </div>添加到width:inherit;来解决，#navigation.stick将父元素的宽度（在本例中为960px的标题）应用于元素。

下一个问题是徽标会将导航推送过来。没问题，添加这个CSS：

#logo{
    position:absolute;
}

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

最后是居中。你需要一些额外的改变。

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

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

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

我不能用jquery在正确的方向上扩展div？

1 个答案: