title: Stop a Sticky Div Script using jQuery Breakpoint
body: <p>I am attempting to make a sidebar div stick (or become fixed) after scrolling down to it. When I scroll back up, it goes back to its position being relative.</p>
  
  <p>I use a plugin called (<a href="https://github.com/martinmartinmartin/breakpoint" rel="nofollow">Breakpoint</a>) which use to "break" the script, because my CSS media queries change the sidebar to a regular stacking block (for mobile users).</p>
  
  <p>My question is is how do I escape it (using Exit)? The way in which I attempted to do it doesn't appear to work correctly.</p>
  
  <pre><code>        $(document).ready(function() {
      $.breakpoint({
          condition: function() {
              return window.matchMedia("only screen and (min-width:63.75em)").matches;
          },
          enter: function() {
              $(function() {
                  var $sidebar = $(".sidebar"),
                      $window = $(window),
                      offset = $sidebar.offset(),
                      topPadding = 15;
                  $window.scroll(function() {
                          if ($window.scrollTop() &gt; offset.top) {
                              $sidebar.stop().animate({
                                  marginTop: $window.scrollTop() - offset.top + topPadding
                              });
                          } else {
                              $sidebar.stop().animate({
                                  marginTop: 0
                              });
                          }
                      });
              });
          },
          exit: function() {
              var $sidebar = $(".sidebar"),
              $window = $(window);
              $window.scroll(function() {
              $sidebar.stop().removeAttr("style");
              });
          }
      });
  });
  </code></pre>
  
  <p>Breakpoint.js:</p>
  
  <pre><code>/* jQuery Breakpoint [github.com/martinmartinmartin/breakpoint] */
  (function(e){"use strict";function n(e){if(!e.condition()){if(typeof e.exit=="function")try{e.exit()}catch(t){}e.is_active=!1}}function r(e){if(e.condition()){if(typeof e.first_enter=="function"){try{e.first_enter()}catch(t){}delete e.first_enter}if(typeof e.enter=="function")try{e.enter()}catch(t){}e.is_active=!0}}function i(e){e.is_active?n(e):r(e)}function s(){var i=e.grep(t,function(e){return e.is_active}),s=e.grep(t,function(e){return!e.is_active});e.each(i,function(e,t){n(t)});e.each(s,function(e,t){r(t)})}var t=[];e.breakpoint=function(n,r){r=e.extend(!0,{},e.breakpoint.defaults,r);t.push(n);t.length===1&amp;&amp;e(window).on("resize orientationchange",function(){s()});i(n)};e.breakpoint.breakpoints=t;e.breakpoint.defaults={}})(jQuery);
  </code></pre>
  
  <p>Example of how to use Breakpoint.js (from the link)</p>
  
  <pre><code> $.breakpoint({
  condition: function () {
      return window.matchMedia('only screen and (min-width:500px)').matches;
  },
  first_enter: function () {
      // Code will run the first time condition() is true.
      // Here, you might create elements to use in
      // your enter and exit methods.
  },
  enter: function () {
      // Code will run whenever condition() becomes true.
  },
  exit: function () {
      // Code will run whenever condition() becomes false
      // (if it was previously true).
      // This is where you revert the things you do in the
      // enter method.
  }
   });
  </code></pre>
  
  <p>HTML [condensed]</p>
  
  <pre><code>&lt;fieldset&gt;
  &lt;form&gt;
  &lt;div class="options"&gt;&lt;/div&gt;
  &lt;div class="sidebar"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> fieldset{background:#fff;border:1px solid #ccc;border-radius:.25em;margin:0;overflow:hidden;padding:1em;width:100%}
  .options{margin-right:3%;width:74.25%}
  .options,.sidebar{display:inline-block;vertical-align:top}
  .sidebar{background:rgba(0,0,0,0.025);border:1px solid #ccc;border-radius:.25em;font-size:.75em;padding:.375em;width:22.75%}
  @media screen and (max-width: 63.75em) {
  #content .options ul{margin:0}
  .options,.sidebar{display:block;width:100%}
  .sidebar{font-size:1em;margin-top:1em;position:relative}
  }
  </code></pre>