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