折叠菜单不适用于锚链接

Question

我构建了一个菜单，当您从顶部向下滚动超过 250 像素时该菜单会折叠，当您返回顶部时 returns 会恢复到其原始状态。但是我的网站有一些 link 锚 link 到主页的中间。当我直接转到这些 link 时，菜单不起作用。我必须先滚动。他们有办法解决这个问题吗？

这是我使用的代码：

<script>
    jQuery(function () {
        jQuery('.fixed').data('size', 'big');
    });

    jQuery(window).scroll(function () {
        if (jQuery(window).scrollTop() > 250) {
            if (jQuery('.fixed').data('size') == 'big') {
                jQuery('.fixed').data('size', 'small');
                jQuery('.fixed').stop().animate({
                    top: '-125px'
                }, 600);
                jQuery('.navbar-nav').stop().animate({
                    top: '15px'
                }, 600);
                jQuery('.dmbs-header-img').stop().animate({
                    opacity: '0'
                }, 200);
                jQuery('.logo-simple').stop().delay(200).animate({
                    top: '120px'
                }, 600);

            }
        } else {
            if (jQuery('.fixed').data('size') == 'small') {
                jQuery('.fixed').data('size', 'big');
                jQuery('.fixed').stop().animate({
                    top: '0px'
                }, 200);
                jQuery('.navbar-nav').stop().animate({
                    top: '0px'
                }, 200);
                jQuery('.dmbs-header-img').stop().animate({
                    opacity: '1'
                }, 100);
                jQuery('.logo-simple').stop().animate({
                    top: '-50px'
                }, 200);
            }
        }
    });
</script>

Answer 1

只需在点击锚点（或您需要的任何其他事件）时触发滚动事件。

jQuery('a').click(function(){
    jQuery(window).scroll();
});

或

将您的代码移到一个函数中并在滚动或单击锚点时调用它：

function checkScroll(){
    if(jQuery(window).scrollTop() > 250)
    {
        // Your code
    }
    else
    {
        // Your code
    }
}

jQuery(window).scroll(function(){ 
    checkScroll();
});

jQuery('a').click(function(){
    checkScroll();
});

第二种解决方案可能会给您更大的灵活性。

折叠菜单不适用于锚链接

Collapse menu not working with anchor links

javascript

jquery

html

menu

collapse