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

【问题标题】：Waypoints JS Move Main Menu to Fixed Header on Scroll UpWaypoints JS 在向上滚动时将主菜单移动到固定标题
【发布时间】：2015-07-02 23:33:34
【问题描述】：

我有一个带有页面导航的主标题 (#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，但没有任何运气。有人对这个项目的计算或不同方法有建议吗？

【问题讨论】：

标签： javascript jquery-waypoints

【解决方案1】：

在阅读了更多相关的 SO 主题和一些使用航点 js 的测试之后，我放弃了航点 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;
        });
        };
    });
}

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

【讨论】：