无法让我的主导航作为粘性导航执行答案

【问题标题】：Can't get my main nav to perform as a sticky nav无法让我的主导航作为粘性导航执行
【发布时间】：2018-09-22 17:47:05
【问题描述】：

我已经为我正在处理的这个自我项目创建了一个实用程序和主导航栏，我希望主导航在我滚动 42 像素时变得粘滞。

但是，当我滚动导航栏时，它不会停留在窗口顶部。我使用实用程序导航对其进行了测试，并且效果很好。这是我对主导航栏的编码...

$(window).on("scroll", function () {

	var distanceScrolled = $(window).scrollTop();

	console.log("The distance scrolled is: " + distanceScrolled);

	if(distanceScrolled>42){
		$("#main-nav").addClass("scrolled");
	}

	else{
		$("#main-nav").removeClass("scrolled");
	}
});

#main-nav {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: #000000;
}

.main-nav-left {
	list-style: none;
	float: left;
	padding-left: 28px;
	height: 100px;
}

.main-nav-items {
	position: absolute;
	top: 40%;
	left: 290px;
	list-style: none;
	text-decoration: none;
}

.main-nav-items li {
	display: inline-block;
	padding-right: 12px;
	margin-right: 13px;
}

.main-nav-right li {
	float: right;
	padding-right: 12px;
	margin-right: 26px;
	margin-top: 40px;
	list-style: none;
}

#main-nav a {
	text-decoration: none;
	color: #ffffff;
}

.scrolled {
	position: fixed;
	top: 0;
	z-index: 1000;
}

<nav id="main-nav">
		<ul class="main-nav-left">
		    <li><a href="#"><img src="images/thule_logo.png" height="100" width="auto"></a></li>
		</ul>
		<ul class="main-nav-items">
			<li><a href="#">CARRIERS & RACKS</a></li>
			<li><a href="#">ACTIVE WITH KIDS</a></li>
			<li><a href="#">LUGGAGE & BAGS</a></li>
			<li><a href="#">SLEEVES & CASES</a></li>
			<li><a href="#">EXPLORE THULE</a></li>
		</ul>
		<ul class="main-nav-right">
			<li><a href="#"><i class="fas fa-search fa-lg"></i></a></li>
		</ul>
</nav>

<script src="js/jquery-v3.3.1.js"></script>
<script src="js/main.js"></script>

【问题讨论】：

您还没有将 jQuery 添加到您的 sn-p 中，从语法来看 - 以及控制台中的错误：Uncaught ReferenceError: $ is not defined - 似乎是一个要求。
要将 jQuery 添加到您的 HTML 文件中，请在 head 部分中添加：<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head>
您是否考虑过只使用position: sticky（文档：W3C、MDN）？
我忘记将脚本标签添加到 sn-p。我的 HTML 中有两个脚本标签：
我在“main-nav”标签周围添加了一个div，并在JS中调用它。它可以工作，但导航栏会发生变化。

标签： javascript html css navbar

【解决方案1】：

首先，没有为您的 html 导航元素定义“导航”类。因此，在 jQuery 选择器中，您需要按您定义的 id(main-nav) 或 HTML nav 元素本身进行选择。你可以这样做：

if(distanceScrolled>42){
        $("nav").addClass("scrolled");
    }

    else{
        $("nav").removeClass("scrolled");
}

或

if(distanceScrolled>42){
            $("#main-nav").addClass("scrolled");
        }

        else{
            $("#main-nav").removeClass("scrolled");
    }

但在自定义脚本之前添加 jQuery 库文件。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>

其次，最重要的是您要添加一个具有 {position:fixed} 的类（滚动）。由于 Id 比 Class 具有更高的优先级，因此它不会允许 class 覆盖公共 CSS 属性，例如在本例中的“位置”。所以你可以将 !important 添加到类选择器的属性中：

.scrolled{
    position:fixed!important;
    top: 0;
    z-index: 1000;
    }

或

编写深度 CSS 选择，使其优先级高于 Id。喜欢：

#main-nav.scrolled {
    position:fixed;
    top: 0;
    z-index: 1000;
}

两者都可以。

【讨论】：