实现单页网站的导航

Implementing One page web site's navigation

本文关键字：导航 网站 单页 实现      更新时间：2023-09-26

我正在建立一个网页网站，其中有一个粘性的导航。我已经实现了几乎所有的东西，但是当用户通过鼠标滚轮或浏览器的滚动条滚动而不是使用导航时，我无法实现导航链接的高亮显示。我想这可以通过在最接近顶部的部分添加预样式类来实现?

我的第二个问题是如何停止滚动时，用户做一些事情，而页面正在滚动?

我的网站标记是

<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>

这是用于滚动到对应id

的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');
}
 });

这是当用户单击导航链接时突出显示的方式。(我认为这不是一个好方法来做这件事)

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

});
我真的为我糟糕的英语感到抱歉。我希望你能理解我的问题。我的问题是，当用户滚动页面而不使用导航时，如何突出显示链接。以及如何在页面滚动时，当用户点击页面时停止滚动

我从另一个帖子中找到了我的问题的答案。如果有人觉得这有用，就在这里

jQuery改变div #滚动到视图时的css导航

$(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)
    }
});
相关文章：