Waypoints JS在向上滚动时将主菜单移至固定标题

Question

我有一个带有页面导航的主标题（＃top-bar）和一个带有页面各部分链接的子导航栏（＃category-bar）。 子导航栏加载在屏幕底部，然后当用户向下滚动时，通过将固定位置主标题更改为绝对位置将其从屏幕上推下。 子导航栏固定在顶部。 所有这些与航点js触发条的不同位置状态都很好。

现在，我需要在向上滚动时重新显示主标题。 到目前为止，这是我的JavaScript，尽管它不会向上滚动标题：

function moveHeader() {
var topBar = '#top-bar',
var stickyElement = jQuery('#category-bar');
var bottomBarOffset = stickyElement.offset();
var topOffset = jQuery(topBar).offset().top; //get the offset top of the element


jQuery(stickyElement).waypoint({
    handler: function(direction) {
    if (direction === 'down') {
        jQuery(topBar).css({ position: 'absolute', top: bottomBarOffset.top - jQuery(topBar).outerHeight() });
    }
    else {
        jQuery(topBar).attr('style', '');       
    }
    },
    offset: topBarHeight - 1,
});

jQuery(topBar).waypoint({
    handler: function(direction) {
    if (direction === 'up') {
        jQuery(this.element).addClass('pin');
    }
    else {
        jQuery(this.element).removeClass('pin');
    }
    },
    offset: topOffset - jQuery(window).scrollTop() - 100,  //attempt to trigger main header pushed off screen top
});
}

我尝试了不同的计算来触发＃top-bar，但没有任何运气。 有人对这个项目的计算或其他方法有建议吗？

Answer 1

在阅读了更多相关的SO主题以及使用Waypoint JS进行的一些测试之后，我在脚本的这一部分中放弃了Waypoint JS。 我创建了一个函数，用于计算用于设置固定标头的触发点。 向上滚动时，变量计算不断变化，这导致航点不断开火并产生闪烁效果。 这使我意识到，此实现不适用于航点。 我的解决方案在离开顶部之后实现了一个简单的向上/向下滚动jQuery函数。 在此脚本中，将其设置为沿任一方向在20像素滚动上触发：

function moveHeader() {
    var topBar = '#top-bar',
    var stickyElement = '#category-bar';
    var bottomBarOffset = jQuery(stickyElement).offset();
    var topBarOffset = jQuery(topBar).offset().top;

    jQuery(stickyElement).waypoint({
        handler: function(direction) {
        if (direction === 'down') {
            jQuery(topBar).css({ position: 'absolute', top: bottomBarOffset.top - jQuery(topBar).outerHeight() });
        }
        else {
            jQuery(topBar).attr('style', '');       
        }
        },
        offset: topBarHeight - 1,
    });

    jQuery(function(){
        var lastScrollTop = 0;
        var scrollDistance = 20;
        if (jQuery('body').hasClass('page-template-page-sections-menu')) {
        jQuery(window).scroll(function(event){
            var st = jQuery(this).scrollTop();
            if(Math.abs(lastScrollTop - st) <= scrollDistance)
                return;
            if (st > lastScrollTop && st > windowHeight && jQuery('body').hasClass('scroll-up'))
            {
                // downscroll code
                jQuery('body').addClass('scroll-dn');
                jQuery('body').removeClass('scroll-up');
                jQuery(stickyElement).attr('style', '');        
            } else if (st < lastScrollTop && st > windowHeight)
            {
                // upscroll code
                jQuery('body').addClass('scroll-up');
                jQuery('body').removeClass('scroll-dn');
                jQuery(topBar).attr('style', '');       
                jQuery(stickyElement).attr('style', '');        
            } else if (st < lastScrollTop && st < windowMinusTop)
            {
                // upscroll and first section (window height from top of document)
                jQuery(stickyElement).css({ 'z-index': '0' });
                jQuery('body').removeClass('scroll-up scroll-dn');
            }
                lastScrollTop = st;
        });
        };
    });
}

尽管我愿意接受任何进一步的改进，但该解决方案可以满足客户的需求。