固定頂部導航欄的此代碼有什么問題？

Question

如何添加元素？ 我搜索了數周，發現許多教程和示例都具有一些Java腳本，或者說是要設置data-spy進行粘貼，並將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

詞綴將在您的元素中添加position:fixed 。 因此，從.topNavcontainer刪除position:absolute ， .topNavcontainer其CSS中添加一個帶有top:0的詞綴類。

詞綴 affix.js

通過CSS定位

詞綴插件在三個類之間切換，每個類代表一個特定的狀態：.affix，.affix-top和.affix-bottom。 您必須提供樣式， 位置除外：固定； 在.affix上，您自己（獨立於此插件）通過這些類來處理實際位置。

這是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 個解決方案

解決方案1
1 已采納 2015-07-16 09:03:21

固定頂部導航欄的此代碼有什么問題？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-07-16 09:03:21

解決方案1
1 已采納 2015-07-16 09:03:21