这段贴在顶部导航栏上的代码有什么问题？

Question

如何添加元素？我已经搜索了数周，发现许多教程和示例都包含一些 java 脚本，或者说要设置 data-spy 以附加并将 data-offset-top 设置为在修复元素之前要滚动的像素数量。我已经全部尝试过了，none 有效，顶部导航栏没有固定。我是不是忘记了一些 CSS 之类的东西？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<style>
#topDiv {
    width:100%;
    height:75px;
    padding:15px;
    position:relative;
    background-color:grey;
    margin-0;
}

.topNavContainer {
    height:71px;
    background-color:#8AC007;
    position:absolute;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:0 !important;
    z-index:999;
}

.topNavLinks {
    text-align:center;
    line-height:71px;
    width:auto;
    margin:auto;
}

.topNavLinks a {
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
}

.topNavLinks a:hover {
    color:#8AC007;
    background-color:#ffffff;
    text-decoration:none;   
}

#Main {
    padding:0;
    position:relative;
    width:85%;
    height:1900px;
    background-color:black;
    margin-left:auto;
    margin-right:auto;
    margin-top:71px;
}


</style>
</head>

<body>
<div id="topDiv">
<h2>This is the Top Section</h2>
</div>

<div data-spy="affix" data-offset-top="75" class="topNavContainer">
<div class="topNavLinks">
<a href="#">Home</a>
<a href="#">Section 3</a>
<a href="#">Section 2</a>
</div>
</div>

<div id="Main">
<h1 style="color:white;">
This is the Body
</h1>
</div>


</body>
</html>

Answer 1

Affix 会将 position:fixed 添加到您的元素中。因此，从 .topNavcontainer 中删除 position:absolute，并在 CSS 中添加词缀 class，并向其添加 top:0。

Affix affix.js

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions.

Here 是 Affix.js 插件文档的 link。

#topDiv {
  width:100%;
  height:75px;
  padding:15px;
  position:relative;
  background-color:grey;
  margin:0;
}

.topNavContainer {
  height:71px;
  background-color:#8AC007;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:0 !important;
  z-index:999;
}

.affix {
 top:0;
}

.topNavLinks {
  text-align:center;
  line-height:71px;
  width:auto;
  margin:auto;
}

.topNavLinks a {
  display:inline-block;
  padding-left:15px;
  padding-right:15px;
}

.topNavLinks a:hover {
  color:#8AC007;
  background-color:#ffffff;
  text-decoration:none;   
}

#Main {
  padding:0;
  position:relative;
  width:85%;
  height:1900px;
  background-color:black;
  margin-left:auto;
  margin-right:auto;
  margin-top:71px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div id="topDiv">
  <h2>This is the Top Section</h2>
</div>

<div data-spy="affix" data-offset-top="75" class="topNavContainer">
  <div class="topNavLinks">
    <a href="#">Home</a>
    <a href="#">Section 3</a>
    <a href="#">Section 2</a>
  </div>
</div>

<div id="Main">
  <h1 style="color:white;">
    This is the Body
  </h1>
</div>

这段贴在顶部导航栏上的代码有什么问题？

What is wrong with this code to affix the top navigation bar?

html

css

jquery

twitter-bootstrap

affix