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

当截面不是全高时，垂直固定导航

1 个答案: