Реализация навигации на одной странице

Question

Я создаю один веб-сайт, на котором есть липкая навигация. Я реализовал почти все, но я не смог реализовать выделение для ссылки навигации, когда пользователь прокручивает колесико мыши или полосу прокрутки браузера, а не использует навигацию. Я предполагаю, что это можно реализовать, добавив в класс, который ближе всего к вершине, предварительно созданного класса?

Мой второй вопрос: как остановить прокрутку, когда пользователь что-то делает, пока страница прокручивается?

Мой сайт разметки

<nav class="columns col-12 main-nav"> 
     <ul> 
      <li><a href="#page1" class="selected">a link</a></li> 
      <li><a href="#page2">another link</a></li> 
      <li><a href="#page3">cat</a></li> 
      <li><a href="#page4">dog</a></li> 
     </ul> 
</nav> 


<div class="container"> 
    <section class="page" id="page1" data-stellar-background-ratio="1.75"> 

    </section>    
</div> 
<div class="container"> 
    <section class="page" id="page2" data-stellar-background-ratio="1"> 

    </section>    
</div> 

И это мой JQuery для навигации для прокрутки к соответствующему идентификатору

$(document).ready(function() { 

$('a').click(function() { 

    var el = $(this).attr('href'); 
    var elWrapped = $(el); 

    scrollToEle(elWrapped, 40); 

    return false; 

}); 

function scrollToEle(element, navheight) { 

    var offset = element.offset(); 
    var offsetTop = offset.top; 
    var totalScroll = offsetTop - navheight; 

    $('body,html').animate({ 
     scrollTop : totalScroll, 
    }, 2000, 'easeInCirc'); 

} 

}); 

Это, как я выделить навигационную ссылку, когда пользователь нажимает на нее. (I думаю, что это не лучший способ сделать это)

$(document).ready(function() { 

$('nav a').click(function() { 
    $('nav .selected').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 



}); 

Мне очень жаль мой страшный английский. Надеюсь, ты понимаешь мой вопрос. Мой вопрос заключается в том, как выделить ссылку, когда пользователь прокручивает страницу без использования навигации. И как остановить прокрутку, когда пользователь нажимает на страницу во время прокрутки страницы.

Answer 1

Я нашел ответ на свой вопрос с другого поста. Здесь, если кто-то найти этот ПОЛЕЗНЫЕ

jQuery changing css on navigation when div # scrolls into view

$(window).height() // returns the viewport height 
$(document).height() // returns the height of the entire document 
$(window).scrollTop() // returns the Y position of the document that is at the top of the viewport 



var topRange  = 200, // measure from the top of the viewport to X pixels down 
    edgeMargin = 20, // margin above the top or margin from the end of the page 
    animationTime = 1200, // time in milliseconds 
    contentTop = []; 

$(document).ready(function(){ 

// Stop animated scroll if the user does something 
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){ 
    if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel'){ 
    $('html,body').stop(); 
    } 
}); 

// Set up content an array of locations 
$('#sidemenu').find('a').each(function(){ 
    contentTop.push($($(this).attr('href')).offset().top); 
}); 

// Animate menu scroll to content 
    $('#sidemenu').find('a').click(function(){ 
    var sel = this, 
     newTop = Math.min(contentTop[ $('#sidemenu a').index($(this)) ], $(document).height() - $(window).height()); // get content top or top position if at the document bottom 
    $('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){ 
    window.location.hash = $(sel).attr('href'); 
    }); 
    return false; 
}); 

// adjust side menu 
$(window).scroll(function(){ 
    var winTop = $(window).scrollTop(), 
     bodyHt = $(document).height(), 
     vpHt = $(window).height() + edgeMargin; // viewport height + margin 
    $.each(contentTop, function(i,loc){ 
    if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))){ 
    $('#sidemenu li') 
    .removeClass('selected') 
    .eq(i).addClass('selected'); 
    } 
    }); 
}); 

}); 

А вот

https://stackoverflow.com/posts/10144683/edit

// Assign the HTML, Body as a variable... 
var $viewport = $('html, body'); 

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin)... 
$('#element').click(function() { 
    $viewport.animate({ 
     scrollTop: scrollTarget // set scrollTarget to your desired position 
    }, 1700, "easeOutQuint"); 
}); 

// Stop the animation if the user scrolls. Defaults on .stop() should be fine 
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){ 
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){ 
     $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional) 
    } 
});