个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:48:49 25 4
gpt4 key购买 nike

您好，当用户向下滚动时，我正在努力让主要内容位于固定标题下方。

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

我找了很多例子..它们很有用，但没有解释为什么主要内容没有消失在固定标题后面......只是向上移动覆盖标题。

我试过添加:

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;
}

最佳答案

你说

I'm struggling the main content to go underneath the fixed header as the user scrolls down.

但是 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% 确定。

关于html - 固定位置导航栏/标题有效，但内容不会在标题下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28327417/

25 4 0
文章推荐： JavaScript 对象成员
文章推荐： javascript - 表单在点击时有效，但在 JS 提交时无效
文章推荐： javascript - Jquery Unobtrusive Validation 'Cannot read property ' 类型“未定义”
文章推荐： c++ - 在排序的字符串 vector 中进行有效搜索