Question

如何粘贴元素？我已经搜索了几周，发现了许多教程和示例，这些教程和示例都有一些java脚本，或者说要将data-spy设置为affix并将data-offset-top设置为在修复元素之前滚动的像素数量。我已经尝试了所有这一切，但没有一个工作，顶部导航栏不会被修复。我忘记了一些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添加到您的元素中。因此，请从position:absolute删除.topNavcontainer，然后使用top:0向您的CSS添加一个词缀类。

词缀 affix.js

通过CSS定位

affix插件在三个类之间切换，每个类代表一个特定的状态：.affix，.affix-top和.affix-bottom。您必须自己（独立于此插件）为这些类提供样式，并在.affix上使用例外位置：固定; 来处理实际位置。

Here是 Affix.js 插件文档的链接。

#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>

这个代码附加顶部导航栏有什么问题？

1 个答案: