链接到html时，jQuery代码不起作用
[英]jQuery code doesn't work when link to html
问题描述
I have been working with jquery for some of the baisc smooth scrolling functions in Codepen, everything seems works except for that navbar-shrink transition in codepen. 
我一直在使用jquery来处理Codepen中的一些baisc平滑滚动函数，除了codepen中的navbar-shrink转换外，一切似乎都有效。 So I deceided to try it in Visual Studio Code Editor and that's when things went wrong. 所以我决定在Visual Studio代码编辑器中尝试它，这就是出现问题的时候。 It seems that my jquery code is no long working at all, even thought I checked file links in html and I think everything has been linked together and I did not change any of my code. 似乎我的jquery代码根本没有工作，甚至认为我检查了html中的文件链接，我认为所有内容都已链接在一起，我没有更改任何代码。 Why my jquery code is not working at all. 为什么我的jquery代码根本不起作用。 I started off withe bootstrap 4 starting template and what could I possible did wrong, can anyone take a look at my code and give me some feedback, appreciated. 我从bootstrap 4开始模板开始，我可能做错了什么，任何人都可以看看我的代码并给我一些反馈，赞赏。
$(document).ready(function () { var scrollLink = $('.scroll'); scrollLink.click(function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: $(this.hash).offset().top }, 900) }) $(window).scroll(function () { var scrollbarLocation = $(this).scrollTop(); if ($('.navbar').offset().top > 100) { $('.navbar').addClass('navbar-shrink'); } else { $('.navbar').removeClass('navbar-shrink'); } scrollLink.each(function () { var sectionOffset = $(this.hash).offset().top; if (sectionOffset <= scrollbarLocation) { $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); } }) }) })
section { width: 100%; height: 900px; } #home { background-color: lightblue; } #about { background-color: lightsalmon; } #contact { background-color: lightgray; } .active { background-color: blue !important; color: #FFF !important; } * { transition: all .4s ease-in 0s; } .navbar-shrink { height: 45px; /* background-color: transparent !important; */ }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <title>Hello, world!</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top transition"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link scroll" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#contact">Contact</a> </li> </ul> </div> </nav> <section id='home'>Home</section> <section id='about'>About</section> <section id='contact'>Contact</section> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src='main.js'> </script> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2019-02-18 20:44:33
You are using slim version of jQuery without animate and many other functions. 您使用的是瘦身版的jQuery，没有动画和许多其他功能。
Read here jquery : $().animate() is not a function 在这里阅读jquery：$（）。animate（）不是函数
This fixes problem: 这解决了问题：
https://code.jquery.com/jquery-3.1.0.js https://code.jquery.com/jquery-3.1.0.js
解决方案2
1 2019-02-18 21:01:26
You should add these styles below: 您应该在下面添加以下样式：
.navbar-shrink {
padding-top: 0.2em;
padding-bottom: 0.2em;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
.navbar {
-webkit-transition:padding 0.2s ease;
-moz-transition:padding 0.2s ease;
-o-transition:padding 0.2s ease;
transition:padding 0.2s ease;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.