滾動后導航欄不顯示導航鏈接
[英]navbar is not showing the nav links after scrolling
問題描述
我有這個導航欄，當我在我的網頁頂部時它工作正常。 每當我向下滾動時，它都會滾動，但我必須到頂部才能看到導航鏈接。 還有一件事：在我的畫廊頁面導航欄沒有覆蓋頁面內容（圖像）。 我的主頁也出現了同樣的問題。 我什至不能使用導航鏈接。 請幫我。
html, body { margin: 0; padding: 0; width: 100%; height: 100vh; } /* h1 { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 48px; font-family: "Playfair Display"; font-weight: lighter; } */ /* body{ background: #101010; } */ .toggle-btn { position: fixed; margin: 1.4em; padding: 1em; width: 40px; height: 12px; right: 0; z-index: 1; } span.one { position: absolute; width: 40px; height: 2px; background: rgb(105, 48, 48); margin-right: 60px; } span.two { position: absolute; width: 40px; height: 2px; background: rgb(105, 48, 48); margin-top: 12px; margin-right: 60px; } .menu { z-index: 0; position: absolute; background:#000000; height: 100vh; width: 100%; top: -200%; } .data { padding: 8em 0 0 2em; text-align: left; } ul { list-style: none; } li:first-child { color: grey; font-family: Poppins; font-size: 24px; } li:not(:first-child) { color: #fff; font-size: 42px; } a { text-decoration: none; color: #cccccc; font-family: Poppins; } **HTML**
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- navigation animation --> <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/nav.css') }}"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <!-- gallery css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css"/> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400|Roboto+Mono:300i,400&display=swap" rel="stylesheet"> <!-- gsap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- parllax javascript --> <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script> <!-- bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/custom.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/sal.js/dist/sal.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/grid-gallery.css') }}"> <!-- font awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <script src="https://kit.fontawesome.com/a766f28a10.js"></script> <title>AW Zone / {{title}}</title> <style> body { font-family: 'Poppins', sans-serif; font-family: 'Roboto Mono', monospace; margin: 0; padding: 0; width: 100%; } </style> </head> <body> <!-- new navigation is here --> <div class="toggle-btn"> <span class="one"></span> <span class="two"></span> </div> <div class="menu"> <div class="data"> <ul> <li>Navigation</li> <li ><a href="{{ url_for('index') }}" style="color: #ffffff;text-decoration: none;">Home</a></li> <li ><a href="{{ url_for('gallery') }}" style="color: #ffffff;text-decoration: none;">Gallery</a></li> <li><a href="{{ url_for('about') }}" style="color: #ffffff;text-decoration: none;">About</a></li> <li><a href="{{ url_for('contact') }}" style="color: #ffffff;text-decoration: none;">Contact</a></li> </ul> </div> </div> <!-- navbar ends here --> <div class="container text-center" data-sal="slide-up" data-sal-delay="1500" data-sal-easing="ease-out-bouce" data-sal-duration="1200"> <h2 style="font-family: poppins, sens-serif;font-size: 3em;padding-top: 60px;">Gallery</h2> </div> <section class="gallery-block grid-gallery"> <div class="container"> <div class="heading"> <h4 id="heading" data-sal="slide-up" data-sal-delay="1200" data-sal-easing="ease-out-bouce" data-sal-duration="1200">Wedding</h4> </div> <div class="row"> <div class="col-md-6 col-lg-4 item"> <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" data-sal="slide-up" data-sal-delay="1200" data-sal-easing="ease-out-bouce" data-sal-duration="1200"> </a> </div> <div class="col-md-6 col-lg-4 item"> <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> </div> <div class="col-md-6 col-lg-4 item"> <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> </div> <div class="col-md-6 col-lg-4 item"> <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> </div> <div class="col-md-6 col-lg-4 item"> <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> </div> <div class="col-md-6 col-lg-4 item"> <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> </div> </div> </div> <!-- bootstrap 4 JAVASCRIPT --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- greensock --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script> <script src="{{ url_for('static', filename='node_modules/sal.js/dist/sal.js') }}"></script> <script type="text/javascript"> var t1 = new TimelineMax({paused: true}); t1.to(".one", 0.8, { y: 6, rotation: 45, opacity:1, ease: Expo.easeInOut }); t1.to(".two", 0.8, { y: -6, opacity: 1, rotation: -45, ease: Expo.easeInOut, delay: -0.8 }); t1.to(".menu", 2, { top: "0%", ease: Expo.easeInOut, delay: -2 }); t1.staggerFrom(".menu ul li", 2, {x: -200, opacity: 0, ease:Expo.easeOut}, 0.3); t1.reverse(); $(document).on("click", ".toggle-btn", function() { t1.reversed(!t1.reversed()); }); /*$(document).on("click", "a", function() { t1.reversed(!t1.reversed()); });*/ </script> <!-- gallery effects --> <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script> <!-- script for gallery animation --> <script> baguetteBox.run('.grid-gallery', { animation: 'slideIn'}); </script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2020-03-16 15:26:03
您需要將.menu設置為position: fixed; . 您還需要z-index: 1; 以確保它覆蓋其他內容。
.menu {
z-index: 1;
position: fixed;
background: #000000;
height: 100vh;
width: 100%;
top: -200%;
}
scrollTo插件不滾動導航外部的鏈接
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.