Estoy actualizando mi sitio web en los cambios mas actuales guiandome en los cambios y reemplazando $(function() {});
por $(document).ready(function()
pero mi menú scroll no funciona la animación en la versión 3.3.1
de jQuery
actualmente la animación o mi código funciona con la versión 2.1.3
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
$(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); // prevent hard jump, the default behavior
var target = $(this).attr("href"); // Set the target as variable
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 600, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll();
* {
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: all .1s ease;
}
html, body {
height: 100%;
}
h1 {
font-size: 64px;
}
.page-section {
height: 480px;
width: 50%;
margin-left: 35%;
margin-top: 5%;
padding: 3em;
background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
color: white;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
}
.navigation {
position: fixed;
width: 30%;
margin-left: 2%;
background-color: #999;
color: #fff;
}
.navigation__link {
display: block;
color: #ddd;
text-decoration: none;
padding: 1em;
font-weight: 400;
}
.navigation__link:hover {
background-color: #aaa;
}
.navigation__link.active {
color: white;
background-color: rgba(0, 0, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
<nav class="navigation" id="mainNav">
<a class="navigation__link" href="#aaa">Section 1</a>
<a class="navigation__link" href="#bbb">Section 2</a>
<a class="navigation__link" href="#ccc">Section 3</a>
<a class="navigation__link" href="#ddd">Section 4</a>
<a class="navigation__link" href="#eee">Section 5</a>
<a class="navigation__link" href="#fff">Section 6</a>
<a class="navigation__link" href="#7">Section 7</a>
</nav>
<div class="page-section hero" id="1">
<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section" id="aaa">
<h1>Section Two</h1>
</div>
<div class="page-section" id="bbb">
<h1>Section Three</h1>
</div>
<div class="page-section" id="ccc">
<h1>Section Four</h1>
</div>
<div class="page-section" id="ddd">
<h1>Section Five</h1>
</div>
<div class="page-section" id="eee">
<h1>Section Six</h1>
</div>
<div class="page-section" id="fff">
<h1>Section Seven</h1>
</div>
¿Qué cambios debo considerar, un poco confuso normalmente se utilizar cosas muy sencillas y pequeñas sobre jQuery no profundalizo mucho su uso.?