Hay una navegación de página tan suave. ¿Cómo agrego la clase "actual" al menú de navegación, dependiendo de dónde se encuentre el usuario ahora? De modo que cuando una persona gira gradualmente el mouse, se le muestra una sección del sitio en el menú de navegación. https://jsfiddle.net/sazdan/h9rske5p/
$(document).ready(function(){ $('a[href^="#"]').bind('click.smoothscroll',function (e) { e.preventDefault(); let target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <h2 id="one">One</h2> <p> Lorem Ipsum</p> <h2 id="two">Two</h2> <p>Lorem Ipsum.</p> <h2 id="three">Three</h2> <p>Lorem Ipsum</p> <h2 id="four">Four</h2> <p>Lorem Ipsum</p> <h2 id="five">Five</h2> <p>Lorem Ipsum</p> <h2 id="six">Six</h2> <p>Lorem Ipsum</p> </div> <aside> <ul> <li><a class="current" href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#four">Four</a></li> <li><a href="#five">Five</a></li> <li><a href="#six">Six</a></li> </ul> </aside>No estoy muy seguro de si esto es lo que está tratando de lograr, pero puede colocar un evento de scroll en la window para calcular qué h2 está dentro de los límites de la pantalla y establecer la clase current en la respectiva a :
$(window).on('scroll', function(){ let viewportTop = $(window).scrollTop(); let viewportBottom = viewportTop + $(window).height(); $('h2').each(function(){ let elementTop = $(this).offset().top; let elementBottom = elementTop + $(this).outerHeight(); if(elementBottom > viewportTop && elementTop < viewportBottom){ $('aside a').removeClass('current'); $('aside a[href="#' + $(this).attr('id') + '"]').addClass('current'); } }); }); Agregue esto dentro $(document).ready() .
Puedes consultar este artículo sobre cómo detectar si un elemento está en pantalla.