2015-01-28 3 views
0

У меня есть фиксированная верхняя панель навигации, которая использует функцию javascript для уменьшения размера вместе с изменением пары других стилей, когда пользователь прокручивает простую точку привязки. У меня также есть значок мобильного гамбургера, который расширяет навигацию в полноэкранном меню для мобильных устройств. Я хотел бы, чтобы функция 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> 

Любая помощь будет оценена, спасибо!

+0

Вы можете просто использовать 'true' и' false'; вам не нужно создавать булевы экземпляры. Также * обычно * плохая идея напрямую сравнивать с логическими значениями; просто используйте 'if (sc)' или 'if (! sc)'. – Pointy

+0

Я сделал изначально, но создал Boolean, чтобы узнать, поможет ли это безрезультатно ... – rbross3030

+0

Ну где код, который на самом деле * использует * переменную 'sc'? Все, что происходит в коде, который вы опубликовали, заключается в том, что переменная установлена ​​на одну или другую. – Pointy

ответ

0

См. Комментарии к вопросу для деталей, спасибо Pointy.

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