title: on click addClass selected overrule addClass on scroll
body: <p>I'm finding myself in a problem which I think has a easy solution but I cannot see... I have two functions to add a class called <code>selected</code> which highlights the buttons. </p>
  
  <p>One function removes the class selected if present and adds the class to the button clicked:</p>
  
  <pre><code>var sidebarLinks = $('.js-sidebar a');
  
      // About section: Remove and add class on click
      sidebarLinks.on('click', function() {
          sidebarLinks.removeClass('selected');
          $(this).addClass('selected');
      });
  </code></pre>
  
  <p>The other function adds the class selected if the user decides to scroll instead of clicking on the buttons. These buttons would highlight in a determined offset of the page:</p>
  
  <pre><code>    var buttonOne = $('.buttonOne');
      var buttonTwo = $('.buttonTwo');
      var buttonThree = $('.buttonThree');
  
  
  // Select nav buttons if scrolling and not clicking the button
      $(window).scroll(function () {
  
          // About nav sidebar links
          var buttonOne = $('.js-polspotten-sidebar');
          var buttonTwo = $('.js-product-sidebar');
          var buttonThree = $('.js-designers-sidebar');
  
          // About sections top scroll position
          var currentTopPosition = $(this).scrollTop();
          var productsTopPosition = $('#products').offset().top;
          var designersTopPosition = $('#designers').offset().top;
  
  
          // polspotten selected depending on scroll position
          if (currentTopPosition &gt;= currentTopPosition &amp;&amp; currentTopPosition &lt; productsTopPosition) {
              buttonOne.addClass('selected');
          }
          else{
              buttonOne.removeClass('selected');
          }
  
          // products selected depending on scroll position
          if (currentTopPosition &gt;= productsTopPosition &amp;&amp;
              currentTopPosition &lt; designersTopPosition) {
              buttonTwo.addClass('selected');
          }
          else{
              buttonTwo.removeClass('selected');
          }
  
          // designers selected depending on scroll position
          if (currentTopPosition &gt;= designersTopPosition) {
              buttonThree.addClass('selected');
          }
          else{
              buttonThree.removeClass('selected');
          }
  
      });
  </code></pre>
  
  <p>The problem is that both interact at the same time as the click event creates scroll. </p>
  
  <p>What I want is that if somebody clicks on the button the scroll function will not work. It will only work if the user scrolls himself.</p>
  
  <p>Is this possible?</p>