javascript - 当部分不是全高时垂直固定导航

Question

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

当每个部分的高度为 100% 时效果很好，因为它会选择部分的中心，但我的部分不是 100% 高度。

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

Here's a fiddle I created

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

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

编辑:使您的部分容器成为 % 高度。 ex: height: 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');
        }
    });
}