Question

当用户向下滚动时，我正在努力将主要内容转移到固定标题下方。

当用户向下滚动时，而不是主体位于标题下方... 主体向上移动到固定的头部......并覆盖它！而不是从固定标题后面的视图中消失。

我已经找了很多例子..他们很有帮助，但没有解释为什么主要内容不会在固定标题后面消失...只是向上移动覆盖标题

我尝试添加：

position: relative;

但它使主要内容消失。

感谢。

screenshot1

更新的新代码：

的index.html

<html ng-app="financeApp">
  <head>
    <meta charset="utf-8">
    <!-- CSS -->



 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />


</head>

<body>



  <!-- HEADER AND NAVBAR -->
  <header>





   <div class="wrap">
      <!-- logo -->

   <!--    <a href="#!"><img class="logo" src="img/history_00.png" /></a>
  <h7>Building lasting relationships<h7>-->



<ng-controller = "demoCtrl">

<ul class="nav nav-pills pull-left">



      <li ng-class="{active: isState('home') }">
        <a ui-sref="home">HOME</a>
      </li>
      <li ng-class="{active: isState('form') }">
        <a ui-sref="form">ABOUT US</a>



<li ng-class="{active: isState('form') }">
          <a href="#candidates">CANDIDATES</a>

</li>

       <li ng-class="{active: isState('jobs') }">
        <a ui-sref="jobs">JOBS</a>
      </li>
       <li ng-class="{active: isState('joinus') }">
       <a ui-sref="joinus">JOIN US</a>
      </li>


  <li ng-class="{active: isState('contact') }">
        <a ui-sref="contact">CONTACT US</a>
      </li>
    </ul>
    <h3 class="text-muted">          </h3>
    <br>
</div>
</header>







<!--<div class="full-background">-->
<div ui-view class="main"></div>





<!--</div>
</div>-->


<!-- Loading the Footer -->
  <div id="footer" ng-include="'partials/footer.html'"></div>

</body>
</html>


   <!-- App JS -->

这更像是style.css：

 header {
  height:10px;
position: fixed;
width:100%;
height:75px;
margin-top:30px;
margin-bottom: 50px;
}

header .nav {
 /* float:center;*/
margin: 10px auto 0;
/*position: fixed;*/
/*z-index:1;*/
background: #0783A9;

}
.nav {

  background-color:#0783A9 ;
  color: white;
/* float:center;*/

}
.nav>li>a {
  color: white;
}
.nav-pills>li>a:hover {
  color: white;
  background: transparent;
  cursor: pointer;
  background: #cecece;
}

Answer 1

你陈述

我正在努力将主要内容放在固定标题下面用户向下滚动。

但CSS：

header .nav {
float:center; /* not a valid setting for float BTW */
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
position: fixed;
z-index:10;
}

表示nav元素已修复且不标题。

header{
position: fixed;
}

header .nav {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
}

可能你的目标是什么，但没有演示，很难100％肯定。

Answer 2

首先，CSS中不存在float: centre;。

我建议使用以下内容将菜单置于中心位置。只是因为如果用户屏幕大于或小于您自己的屏幕，则它不会显示为居中。

header .nav {
    background: #0783A9;
    margin: 10px auto 0;
    width: 100%;
}

为.nav添加背景颜色会阻止您的内容显示，因为它当前是透明的。

固定位置导航栏/标题有效，但内容不会在标题下滚动

2 个答案: