页面滚动活动导航javascript

Page scrolling active navigation javascript

本文关键字：导航 javascript 活动滚动更新时间：2023-09-26

我有一个固定的顶部导航，我试图让链接更改为活动时，向下滚动的页面。目前我已经得到了它的工作点，如果你点击它会添加一个活动类，并去正确的位置。当你向上或向下滚动时，它应该改变到导航的上一/下一节，这是我无法工作的。什么好主意吗?

感谢html:

<body id="page-top">
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#page-top"><img src="img/nav-logo.png" id="company-logo-large"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" id="mainmenu">
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#team">Team</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

部分:

<section id="about"></section>
<section id="services"></section>
<section id="team"></section>

javascript:

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});
function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#mainNav a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#mainNav li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

我想我已经回答了这个问题。选中"在滚动栏上突出显示活动菜单项"

和这个jsfield:

// JavaScript Document
// Can also be used with $(document).ready() / $(window).load()
$(document).ready(function(){
  $('body').css('display', 'none');
  $('body').fadeIn(500);
  // An offset to push the content down from the top
  var listElement = $('#primary-navwrapper li');
  var offset = $('#header').outerHeight();

  listElement.find('a[href^="#"]').click(function(event) { 
    // Prevent from default action to intitiate
    event.preventDefault();
    // The id of the section we want to go to.
    var anchorId = $(this).attr("href");
    // Our scroll target : the top position of the
    // section that has the id referenced by our href.
        if (anchorId.length > 1 && $(anchorId).length > 0)
        {
     var target = $(anchorId).offset().top - offset;
        }
        else
        {
         var target = 0;
        }
    //console.log(target);

    $('html, body').animate({ scrollTop: target }, 500, function () {
      //window.location.hash = '!' + id;
      window.location.hash = anchorId;
    });
    setActiveListElements();
  });

       // Update current item class
  function setActiveListElements(event){
    var windowPos = $(window).scrollTop();
    $('#primary-navwrapper li a[href^="#"]').each(function() { 
            var currentLink = $(this);
      if ($(currentLink.attr("href")).length > 0)
                {
                var refElement = $(currentLink.attr("href"));
                if (refElement.position().top <= windowPos && (refElement.position().top + refElement.height() + $("#primary-navwrapper").height() ) > windowPos) {
                    $('#primary-navwrapper li a').removeClass("current");
                    currentLink.addClass("current");
                }
                else{
                    currentLink.removeClass("current");
                }
            }
    });
  }

    // Update menu item on scroll
  $(window).scroll(function() {
           // Call function
    setActiveListElements();
  });

  $('.backtotop').click(function () {
    $('html, body').animate({ scrollTop: 0}, 1250);
    return false;
  });
});