当JQuery到达页首时，JQuery添加文本元素

Question

I am making a website with a stick navbar. 我正在制作一个带棒状导航栏的网站。 I would like to add the text elemnent "▲" to the left of the navbar when it reaches the top of the webpage and "sticks". 我想在导航栏左侧添加文本元素“▲”，当它到达网页顶部并“粘住”。 I would also like to remove the element when the navbar "unsticks" (leaves the top of the webpage). 我还想在导航栏“unsticks”（离开网页顶部）时删除该元素。 Below is the JQuery and HTML I am using: 下面是我正在使用的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>

However when I scroll the JQuery just inserts a million symbols into the navbar whenever I scroll instead of just one when it reaches the top like this: 然而，当我滚动JQuery时，每当我滚动时，只需将一百万个符号插入导航栏，而不是只有一个，当它到达顶部时，如下所示：

This is very frustrating so I help someone can help. 这非常令人沮丧，所以我帮助别人可以提供帮助。

Edit: 编辑：

The complete code is below, not sure if it helps :) (It is not responsive yet so doesn't look right without being expanded) 完整的代码如下，不确定它是否有帮助:)（它没有响应，所以如果没有扩展看起来不正确）

 @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>

Answer 1

Try this 试试这个

 @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($('#navSymbol').offset().top) var distance = $('#navSymbol').offset().top, $window = $(window); $window.scroll(function() { console.log($window.scrollTop()); if ($window.scrollTop() <= 0) { $("#navSymbol").show(); } else { $("#navSymbol").hide(); } }); </script> </body> </html>

当JQuery到达页首时，JQuery添加文本元素

问题描述

1 个解决方案

解决方案1
2 2019-07-31 09:30:19

当JQuery到达页首时，JQuery添加文本元素

问题描述

1 个解决方案

解决方案1 2 2019-07-31 09:30:19

解决方案1
2 2019-07-31 09:30:19