Stop scroll with jquery

by Muhamad Firhat

HTML

<div id="container">
  <div id="div"></div>
  <div id="footer"></div>
</div>

CSS

#container {
  width: 100%;
  height: 900px;
  background: goldenrod;
  position: relative;
}

#div {
  width: 100%;
  height: 20px;
  background: lightblue;
}

#footer {
  background: lightyellow;
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 500px;
}

JavaScript

(function($) {
    var element = $('#div'),
    		footer = $('#footer'),
        elementHeight = element.height(),
        footerPos = footer.offset().top,
        stopTop1 = footerPos - elementHeight * 2,
        stopTop2 = footerPos + elementHeight * 2 + elementHeight,
        originalY = element.offset().top;

    var topMargin = 20;

    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
				console.log('scrollTop', scrollTop)
        console.log('footerPos', footerPos)
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop > stopTop1 && scrollTop < stopTop2
                    ? stopTop1
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);