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

Question

我正在使用以下固定导航插件-https://codyhouse.co/demo/vertical-fixed-navigation/index.html

当每个部分的高度为100％时，它会拾取该部分的中心，但我的部分并非100％的高度，效果很好。

有没有办法使它适应较小的部分？

这是我创作的小提琴

如您所见，它甚至没有突出显示顶部或底部，因为它们不在屏幕的中心。

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

编辑：使您的部分容器的高度为％。 例如：高度：100％在固定高度下无法正常工作。

更改updateNavigation使其看起来像这样，不要复制并粘贴它，因为您可以看到if else语句是否需要工作来检查您是否在页面底部。

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