折叠菜单不适用于锚链接

Question

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

这是我使用的代码：

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

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