大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap 4 scrollspy无法更改活动的navbar项目,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
index.html –
<body> <!-- Navbar --> <nav id="main-nav" class="navbar navbar-expand-lg bg-light bg-transparent fixed-top"> <div class="container"> <a class="navbar-brand" href="#"><!-- some logo --></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#header">Home</a></li> <li class="nav-item"><a class="nav-link" href="#book">About Book</a></li> <li class="nav-item"><a class="nav-link" href="#author">About Author</a></li> <li class="nav-item"><a class="nav-link" href="#inspire">Inspire</a></li> </ul> </div> </div> </nav> <!-- Header --> <header id="header" class="header"> <!-- some content --> </header> <!-- About book --> <section id="book" class="book py-5"> <!-- some content --> </section> <!-- About author --> <section id="author" class="author py-5"> <!-- some content --> </section> <!-- Inspire --> <section id="inspire" class="author py-5"> <!-- some content --> </section> <!-- JavaScript --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudFlare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/main.min.js"></script> </body>
我的style.css文件中有body {postsition:relativE}.
@H_999_5@main.js –
$(document).ready(function () { // Scroll spy $('body').scrollspy({ target: "#main-nav",offset: 70 }); // Navbar fade changeNavbar(); $(window).scroll(function () { changeNavbar(); }); function changeNavbar() { var navbar = $("#main-nav"); if ($(this).scrollTop() >= 100) { navbar.addClass("bg-light").removeClass("bg-transparent"); } else if ($(this).scrollTop() < 100) { navbar.removeClass("bg-light").addClass("bg-transparent"); } } });
我搜索了很多,但没有得到任何解决方案,已经浪费了几个小时,任何帮助将不胜感激.
提前致谢.
以上是大佬教程为你收集整理的jquery – Bootstrap 4 scrollspy无法更改活动的navbar项目全部内容,希望文章能够帮你解决jquery – Bootstrap 4 scrollspy无法更改活动的navbar项目所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。