【发布时间】：2019-12-08 18:28:39
【问题描述】：
我正在制作一个带有棒状导航栏的网站。当导航栏到达网页顶部并“粘贴”时，我想将文本元素“▲”添加到导航栏的左侧。我还想在导航栏“松开”（离开网页顶部）时删除该元素。下面是我正在使用的 JQuery 和 HTML：
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
$("#nav").prepend("<li style=\"float: left;\" id=\"navSymbol\"><a href=\"#\">▲</a></li>");
} else {
$("#navSymbol").remove();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="sticky">
<li><a href="#">HOME</a></li>
<li><a href="#">CAPABILITIES</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">RFQ</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>但是，当我滚动 JQuery 时，只要滚动就会在导航栏中插入一百万个符号，而不是像这样到达顶部时只插入一个：
这很令人沮丧，所以我帮助别人可以提供帮助。
编辑：
完整的代码如下，不确定是否有帮助:)（它还没有响应，所以如果不扩展看起来就不对了）
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
@keyframes shadow-pulse {
0% {
text-shadow: 0 0 0px black;
}
100% {
text-shadow: 0 0 10vw black;
}
}
#headerTriangle {
font-size: 6vw !important;
animation: shadow-pulse 3s infinite;
}
#header {
text-align: center;
padding-top: 8vw;
}
.headerText {
font-family: 'Rubik', sans-serif;
font-size: 5vw;
padding: 2vw 0vw 2vw 0vw;
}
#nav {
padding-top: 4vw;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
text-decoration: none;
padding: 0 30px;
font-family: 'Rubik', sans-serif;
color: black;
}
#nav a:hover {
animation: shadow-pulse 2s 1;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handmade Studios</title>
<meta name="description" content="">
<meta name="author" content="Alex Hawking">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Fonts-->
</head>
<body>
<div id="header">
<h1 id="headerTriangle">▲</h1>
<h1 class="headerText" style="font-weight: 500;">Hello World</h1>
<h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
</h1>
</div>
<ul id="nav" class="sticky">
<li id="navSymbol"><a href="#">▲</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">CAPABILITIES</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">RFQ</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div style="height: 100vw;"></div>
<!--Scripts-->
<script src="js/scripts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($('div:last').offset().top)
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
$("#navSymbol").hide();
} else {
$("#navSymbol").show();
}
});
</script>
</body>
</html>【问题讨论】：
标签： javascript jquery html navbar nav