如何让元素在某一点之后停止滚动?

时间:2016-02-25 00:19:26

标签: javascript jquery

好的,问题是这样,我在一个点上设置了一个元素,但是,由于某些原因,我需要它向上滚动一点,然后停在另一个固定点上。我的朋友帮我了解了一下代码,但是我们都不是Javascript的专家,所以类似的问题并没有真正帮助我解决这个问题。我现在的代码是

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'
      });
    }
  });
});

一般来说它起作用,从某种意义上来说它应该是它应该存在的地方并停止滚动它应该在哪里,但是进一步滚动它只是在固定点之间保持闪烁并且只是向上滚动,我并不是真的知道如何阻止它。

1 个答案:

答案 0 :(得分:0)

您可以使用以下功能:

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'
      });
    }
  });
});