Question

我正在尝试使用固定且居中的导航栏div，它位于使用视差效果的另一个div中。如果我将位置设置为相对，则导航栏将在另一个div中居中，但是将其设置为固定将具有固定的导航栏但不居中。我想避免使用保留左x倍的px，因为它对于交叉分辨率似乎不一致。反正是否保持导航栏固定位置但是在没有mar的情况下将其置于另一个div的中心？

这是我的代码

<div id="page-wrap">
  <header>
    <nav id="nav">Nav</nav>
  </header>
    <div id="main">Lorem ipsum flash.</div>
</div>

CSS

#page-wrap{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 95%;
}

header {
   background: url('../images/cover1.jpg') no-repeat;
   background-size:100% 90%;
   width: 100%;
   height: 1000px;
}

#nav {
   background: #f0f;
   margin: 0 auto;
   height: 500px;
   min-width: 980px;
   max-width: 2048px;
   position: fixed;
   opacity: 1;
}

#main {
  background: #fff;
  position: relative;
}

如果需要，

JS

<script>   
   $(document).on('scroll', function (e) {
   $('#nav').css('opacity', ($(document).scrollTop() / 500));
    var st = $(window).scrollTop();


   $('header').css({'background-position-y': 0 + (st*.77 )+"px"});
   });
</script>

Answer 1

您可以将nav保留在屏幕中央，但需要将其包装在固定容器working Fiddle内。 HTML略有不同：

<div id="page-wrap">
    <header>
        <div class="nav_container">
            <nav id="nav">Nav</nav>
        </div>
    </header>
    <div id="main">Lorem ipsum flash.</div>
</div>

在CSS中，固定元素变为.nav_container，nav必须变为inline-block - 这样我们就可以使用文字对齐：

#page-wrap {
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 95%;
}
header {
    background: url('http://placehold.it/500x500') no-repeat;
    background-size:100% 90%;
    width: 100%;
    height: 500px;
}
.nav_container {
    margin: 0 auto;
    width: 100%;
    position: fixed;
    opacity: 1;
    text-align: center;
}
.nav_container nav {
    display: inline-block;
    background: #f0f;
    min-width: 100px;
    max-width: 2048px;
    height: 100px;
}
#main {
    background: #fff;
    position: relative;
    height: 500px;
}

Answer 2

如何使用javascript中心导航？

$('#nav').css({'left': (($(document).width() - $('#nav').width())/2 )+"px"});

Answer 3

这应该足以满足您的要求。如果这不起作用，请告诉我。

#nav {
       background: #f0f;
       margin: 0 auto;
       height: 500px;
       min-width: 980px;
       max-width: 2048px;
       position: fixed;
       opacity: 1;
       left: 50%;
    }

如何将固定导航栏置于另一个div中心？

3 个答案: