當JQuery到達頁首時，JQuery添加文本元素
[英]JQuery Add Text Element To Nav When It Reaches Top Of Page
問題描述
我正在制作一個帶棒狀導航欄的網站。 我想在導航欄左側添加文本元素“▲”，當它到達網頁頂部並“粘住”。 我還想在導航欄“unsticks”（離開網頁頂部）時刪除該元素。 下面是我正在使用的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>
1 個解決方案
解決方案1
2 2019-07-31 09:30:19
試試這個
@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>
我如何獲得一個滾動頁面和導航的導航，當它使用普通的javascript到達頂部導航
[英]how do i get a navigation that scrolls with page and stick when it reaches the top nav with plain javascript
.slideToggle（）在到達頁面頂部時隱藏元素，動畫顯示為短剪輯
[英].slideToggle() hides element when it reaches the top of the page, animation appears cut short
使用javascript和css到達屏幕頂部時修復元素
[英]Fix an element when it reaches the top of the screen using javascript and css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.