部分不全高时的垂直固定导航

Question

I'm using the following fixed navigation plug-in - https://codyhouse.co/demo/vertical-fixed-navigation/index.html

It works great when each section has 100% height as it picks the center of the section, but my sections aren't 100% height.

Is there a way to adapt this to work with smaller sections?

Here's a fiddle I created

As you can see, it doesn't even highlight the top or bottom sections as they aren't in the center point of the screen.

JS:

jQuery(document).ready(function($){
    var contentSections = $('.cd-section'),
        navigationItems = $('#cd-vertical-nav a');

    updateNavigation();
    $(window).on('scroll', function(){
        updateNavigation();
    });

    //smooth scroll to the section
    navigationItems.on('click', function(event){
        event.preventDefault();
        smoothScroll($(this.hash));
    });
    //smooth scroll to second section
    $('.cd-scroll-down').on('click', function(event){
        event.preventDefault();
        smoothScroll($(this.hash));
    });

    //open-close navigation on touch devices
    $('.touch .cd-nav-trigger').on('click', function(){
        $('.touch #cd-vertical-nav').toggleClass('open');

    });
    //close navigation on touch devices when selectin an elemnt from the list
    $('.touch #cd-vertical-nav a').on('click', function(){
        $('.touch #cd-vertical-nav').removeClass('open');
    });

    function updateNavigation() {
        contentSections.each(function(){
            $this = $(this);
            var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
            if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
                navigationItems.eq(activeSection).addClass('is-selected');
            }else {
                navigationItems.eq(activeSection).removeClass('is-selected');
            }
        });
    }

    function smoothScroll(target) {
        $('body,html').animate(
            {'scrollTop':target.offset().top},
            600
        );
    }
});

Answer 1

edit: make your section containers a % height. ex: height: 100% it will not work properly with a fixed height.

change your updateNavigation to look like this, don't copy and paste this as you can see the if else statement needs work to check if you are at the bottom of the page.

function updateNavigation() {
    contentSections.each(function(){
        $this = $(this);
        var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
        if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
            navigationItems.eq(activeSection).addClass('is-selected');
        }
  else if(!$(window).scrollTop() ){
  navigationItems.eq(activeSection).removeClass('is-selected'); 
  navigationItems.eq(0).addClass('is-selected'); 
  }

  else if(check if you are at the bottom of the page not sure how){ 

  navigationItems.eq(activeSection).removeClass('is-selected'); 
  navigationItems.eq(navigationItems.length -1).addClass('is-selected'); 

  }else {
            navigationItems.eq(activeSection).removeClass('is-selected');
        }
    });
}