Bootstrap 和 jQuery 的问题

issues with bootstrap and jquery

本文关键字：问题 jQuery Bootstrap      更新时间：2023-09-26

我一直在尝试使用导航栏（引导）和jQuery，但似乎无法使其工作。我想做的很简单（或者看起来是这样）。滚动到特定数量的像素后，我正在尝试将导航栏固定在页面顶部，但似乎无法使其准确工作。每次我滚动到导航栏时，而不是从该点开始修复导航栏，它所做的只是剪切顶部边框，然后从导航栏项的顶部修复。这是我的代码：

function scrollFunction() {
	if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
		$(document).ready(function() {
			$("nav").addClass("navbar-fixed-top")
		});
	} else {
		document.getElementsByTagName("nav").className = "";
		}
}
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link type="text/css" rel="stylesheet" href="./ok.css">
		<link type="text/css" rel="stylesheet" href="./Codepen project/animate.css">
		<link rel="stylesheet" href="./Codepen project/bootstrap-3.3.5-dist/css/bootstrap.min.css">
		<link type="text/css" rel="stylesheet" href="./Codepen project/font-awesome-4.5.0/css/font-awesome.min.css">
		<script src="./Codepen project/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
		<script src="./Codepen project/jquery-2.2.1.min.js"></script>
		<script src="./ok.js"></script>
	</head>
	<body style="height:1000px;background-color:;" onscroll="scrollFunction">
		<div class="container" style="height:70px;">
			<div class="row">
				<div class="col-md-8">
					<table style="border-collapse:collapse;">
						<tr>
							<td style="padding-right:10px"><h1>Welcome to my Portfolio</h1></td>
							<td style="position:absolute;bottom:0;padding-left:10px;border-left: 1px solid black"><h3>In a bid to actualizing my dream...</h3></td>
						</tr>
					</table>
				</div>
				<div class="col-md-4" style="position:relative;height:70px;">
					<div id="contact" style="position:absolute;right:0px;bottom:0">
						<i class="fa fa-facebook-official fa-2x"></i>
						<i class="fa fa-twitter fa-2x"></i>
					</div>
				</div>
			</div>
		</div>
		<nav class="navbar navbar-default" id="nav">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myDrop'>
						<i class="fa fa-bars fa-2x"></i>
					</button>
					<a class="navbar-brand" href="#" style="font-size:1.25em !important;"><i class="fa fa-home fa-2x"></i> 'Tunde Aromire</a>
				</div>
				<div class="collapse navbar-collapse" id='myDrop'>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#"><i class="fa fa-user fa-lg"> Home</i></a></li>
						<li><a href="#"><i class="fa fa-folder fa-lg"> Portfolio</i></a></li>
						<li class="dropdown">
							<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>
							<ul class="dropdown-menu">
								<li><a href="http://www.facebook.com/tunde1990">Facebook</a></li>
								<li><a href="http://www.twitter.com/tunde1990">Twitter</a></li>
								<li><a href="http://www.codepen.io/toondaey">Codepen</a></li>
							</ul>
						</li>
						<li><a href="#"><i class="fa fa-info fa-lg"> About</i></a></li>
					</ul>
				</div>
				
			</div>
		</nav>
	</body>
</html>

我还没有测试过，但尝试在没有 document.ready 的情况下声明你的 scrollTop 函数，如下所示：

function scrollFunction() {
    if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
        $("nav").addClass("navbar-fixed-top")
    } else {
        document.getElementsByTagName("nav").className = "";
    }
}
相关文章：