Question

我有一个固定的顶部导航栏，它使用javascript函数缩小大小，同时在用户滚过某个锚点时更改其他几个样式。我还有一个移动汉堡图标，可以将导航扩展为移动设备的全屏菜单。我希望javascript函数缩小顶部导航以便在我点击汉堡包（打开菜单）时停止工作并在再次单击时恢复（关闭菜单），但是我无法启动滚动功能或停止。

这是我到目前为止编写的代码：

<script>
var win = $(window),
    nw = $('.navBgWrapper'),
    sw = $('.scrollWaypoint'),
    pos = sw.offset().top;
var sticky = function(){
            if (win.scrollTop() > pos) {
                nw.addClass('navBgWrapperChange');
                $('.vjLogoWhite').removeClass('logoGo');
                $('.vjLogoGreen').addClass('logoGo');

                $('.navLink').removeClass('linkTop');
                $('.navLink').addClass('linkScroll');
                $('.navContent').on('hover', '.navLink', function () {
                    $('.navLink').removeClass('hoverTop');
                    $('.navLink').addClass('hoverScroll');
                });

            }
            else {
                nw.removeClass('navBgWrapperChange')
                $('.vjLogoGreen').removeClass('logoGo');
                $('.vjLogoWhite').addClass('logoGo');

                $('.navLink').removeClass('linkScroll');
                $('.navLink').addClass('linkTop');
                $('.navContent').on('hover', '.navLink', function () {
                    $('.navLink').removeClass('hoverScroll');
                    $('.navLink').addClass('hoverTop');
                });
            }
    }

//burger script
var sc = true;
$('.menu').click(function(){
    $(this).toggleClass('open');
    if (!sc) {
        sc = true;
    } else {
        sc = false;
    }
    $('.menu-item').toggleClass('menuItemToggle');
    $('.navMenuBg').toggleClass('navMenuBgGo');
    $('.vjLogoWhite').toggleClass('logoGo');
    $('.vjLogoGreen').toggleClass('logoGo');
    $('.navLinks').toggleClass('navLinksShow');
});
</script>
<script>
if (sc) {
    win.scroll(sticky);
}
</script>

任何帮助将不胜感激，谢谢！

Answer 1

请参阅问题评论以获取详细信息，感谢Pointy。

var sticky = function(){ if (!sc) { return; } else {...}

用条件语句不能停止javascript函数？

1 个答案: