如何使元素在特定点后停止滚动？

Question

Ok so as the question says, I have an element set on a point, but, for reasons, I need it to scroll a bit up but then stop on another fixed point. My friend helped me with the code a bit but neither of us are really pro at Javascript so similar questions haven't really helped me figure this thing out. My code for now is

function absToFix() {
  var udaljenost = $(window).scrollTop();
  var sideb = $('#sidebar').offset().top;
  var distance = (sideb - udaljenost);
  return distance;
}
$(document).ready(function() {
  var distance = absToFix();
  $(window).scroll(function() {
    distance = absToFix();
    if (distance < 220) {
      $('#sidebar').css({
        position: 'fixed',
        top: '220px'
      });
    } else {
      $('#sidebar').css({
        position: 'absolute',
        top: '340px'
      });
    }
  });
});

Generally it works, in the sense that it stands where it should be and it stops scrolling where it should, however with further scrolling it just keeps flickering between the fixed point and just scrolling up, and I don't really know how to stop that.

Answer 1

you can use these functions:

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

    function enableScroll() {
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', preventDefault, false);
        window.onmousewheel = document.onmousewheel = null; 
        window.onwheel = null; 
        window.ontouchmove = null;  
        document.onkeydown = null;  
    }

 $(document).ready(function() {
  var distance = absToFix();
  $(window).scroll(function() {
    distance = absToFix();
    if (distance < 220) {
      disableScroll();
    } else {
      $('#sidebar').css({
        position: 'absolute',
        top: '340px'
      });
    }
  });
});