如何更改滚动导航栏的活动 class
[英]How to change active class of the navbar on scroll
问题描述
I tried every js code that I only could find, but nothing works, I don't understand why, I checked console, no mistakes there.
我尝试了每个我只能找到的js代码，但没有任何效果，我不明白为什么，我检查了控制台，那里没有错误。 Maybe somebody can spot the mistake?也许有人可以发现错误？ Maybe I have to import some files or something else?也许我必须导入一些文件或其他东西？ Somehow code does not see the scroll, only when I click on the link.不知何故，只有当我单击链接时，代码才看到滚动。 Is there a way to do it only by Bootstrap maybe?有没有办法只能通过 Bootstrap 来做到这一点？ Without using JS?不使用JS？
$(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#navbarResponsive a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#navbarResponsive ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }
a:hover, .active a{ border-bottom: 2px solid; font-weight: bolder; border-bottom: 2px solid #0F0F6A; }
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> type="image/ico"> <link rel="stylesheet" href="assets/css/styles.css" /> <script src="assets/js/sweetalert.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="assets/script.js"></script> <script src="https://smtpjs.com/v3/smtp.js"></script> <script src='assets/js/bootstrap.min.js'></script> <link rel="stylesheet" href="assets/css/bootstrap.min.css"/> </head> <body> <header> <nav class="navbar navbar-expand-lg xl_padding py-4 py-md-4 navbar-light fixed-top shadow p-3 mb-5 bg-white rounded" id='TopNav'> <div class="container-fluid"> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav nav m-auto"> <li class="nav-item first active"> <a class="nav-link gotham" href="#about">About us <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link gotham" href="#calendar">Calendar</a> </li> <li class="nav-item"> <a class="nav-link gotham" href="#feedback">Feedback</a> </li> <li class="nav-item"> <a class="nav-link gotham" href="#photo">Photo</a> </li> </ul> </div> </div> </nav> </header> <section id='about'></section> <section id='calendar'></section> <section id='feedback'></section> <section id='photo'></section> </body>
1 个解决方案
解决方案1
0 已采纳 2021-04-08 19:40:56
I have changed the jQuery script and updated in below link, please use below link for sample code & output: https://www.kingsubash.com/how-to-change-active-class-of-the-navbar-on-scroll我已更改 jQuery 脚本并在以下链接中更新，请使用以下链接获取示例代码和 output： https://www.king-subash.com/the-classnavto-change-滚动
Not able to paste entire script here so pasted in separate link.无法在此处粘贴整个脚本，因此粘贴在单独的链接中。 On scroll event you can view the sample on the same page.在滚动事件中，您可以在同一页面上查看示例。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.