0
我一直在嘗試與navbar（bootstrap）和jQuery一起工作，似乎無法讓它工作。 我想要做的事很簡單（或者看起來如此）。我想讓我的導航欄在滾動過去特定數量的像素後固定在頁面頂部，但似乎無法使其準確工作。 每次我滾動到導航欄，而不是導航欄從該點開始修復時，它所做的只是剪掉頂部邊框，然後從導航欄項目的頂部修復。 這裏是我的代碼：引導和jQuery的問題
function scrollFunction() {
\t if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
\t \t $(document).ready(function() {
\t \t \t $("nav").addClass("navbar-fixed-top")
\t \t });
\t } else {
\t \t document.getElementsByTagName("nav").className = "";
\t \t }
}<!DOCTYPE html>
<html>
\t <head>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link type="text/css" rel="stylesheet" href="./ok.css">
\t \t <link type="text/css" rel="stylesheet" href="./Codepen project/animate.css">
\t \t <link rel="stylesheet" href="./Codepen project/bootstrap-3.3.5-dist/css/bootstrap.min.css">
\t \t <link type="text/css" rel="stylesheet" href="./Codepen project/font-awesome-4.5.0/css/font-awesome.min.css">
\t \t <script src="./Codepen project/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
\t \t <script src="./Codepen project/jquery-2.2.1.min.js"></script>
\t \t <script src="./ok.js"></script>
\t </head>
\t <body style="height:1000px;background-color:;" onscroll="scrollFunction">
\t \t <div class="container" style="height:70px;">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-8">
\t \t \t \t \t <table style="border-collapse:collapse;">
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td style="padding-right:10px"><h1>Welcome to my Portfolio</h1></td>
\t \t \t \t \t \t \t <td style="position:absolute;bottom:0;padding-left:10px;border-left: 1px solid black"><h3>In a bid to actualizing my dream...</h3></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t </table>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-4" style="position:relative;height:70px;">
\t \t \t \t \t <div id="contact" style="position:absolute;right:0px;bottom:0">
\t \t \t \t \t \t <i class="fa fa-facebook-official fa-2x"></i>
\t \t \t \t \t \t <i class="fa fa-twitter fa-2x"></i>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <nav class="navbar navbar-default" id="nav">
\t \t \t <div class="container-fluid">
\t \t \t \t <div class="navbar-header">
\t \t \t \t \t <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myDrop'>
\t \t \t \t \t \t <i class="fa fa-bars fa-2x"></i>
\t \t \t \t \t </button>
\t \t \t \t \t <a class="navbar-brand" href="#" style="font-size:1.25em !important;"><i class="fa fa-home fa-2x"></i> 'Tunde Aromire</a>
\t \t \t \t </div>
\t \t \t \t <div class="collapse navbar-collapse" id='myDrop'>
\t \t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t \t \t <li><a href="#"><i class="fa fa-user fa-lg"> Home</i></a></li>
\t \t \t \t \t \t <li><a href="#"><i class="fa fa-folder fa-lg"> Portfolio</i></a></li>
\t \t \t \t \t \t <li class="dropdown">
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-book fa-lg"> Contacts </i> <i class="fa fa-caret-down fa-lg"></i></a>
\t \t \t \t \t \t \t <ul class="dropdown-menu">
\t \t \t \t \t \t \t \t <li><a href="http://www.facebook.com/tunde1990">Facebook</a></li>
\t \t \t \t \t \t \t \t <li><a href="http://www.twitter.com/tunde1990">Twitter</a></li>
\t \t \t \t \t \t \t \t <li><a href="http://www.codepen.io/toondaey">Codepen</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li><a href="#"><i class="fa fa-info fa-lg"> About</i></a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t \t
\t \t \t </div>
\t \t </nav>
\t </body>
</html>
你的腳本SRC URL格式不是適當的參考。還用分號完成addClass代碼行。爲什麼不用jQuery以同樣的方式保持一致和removeClass？ – amespower
感謝您的引用。您能否請教我如何正確引用腳本src。我真的很感激。 – toondaey
所以我想你是在codepen中做這個，因爲你的src說「Codepen項目」，所以這是一個僞參考？如果這是一個實際的參考，它必須是「./codepen-project/etc」。您可以選擇使用CDN（內容交付網絡）來託管它們。 – amespower