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主题和一些使用航路点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;
        });
        };
    });
}

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

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

1 个答案: