Question

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

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

$(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>

Answer 1

首先，没有为您的html nav元素定义“ nav”类。因此，在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的优先级高于类，因此它不允许类覆盖通用CSS属性，例如本例中的“位置”。因此，您可以在类选择器的属性中添加！important：

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

或

编写深入的CSS选择，使其优先级高于ID。喜欢：

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

两个都可以。

无法让我的主导航器成为粘性导航器

1 个答案: