JQuery determines that the div will stop when it reaches a certain point along with the scroll bar

  • 2020-03-30 02:32:10
  • OfStack

Implementation code:


<script type="text/javascript">
var rollSet = $('#widget');
    var offset = rollSet.offset();
    var fwidth = $("#footer").height();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
        if (offset.top < scrollTop) {
            if (scrollBtm > fwidth) {
                rollSet.removeClass('absolute').addClass('fixed')
            } else {
                rollSet.removeClass('fixed').addClass('absolute')
            }
        } else {
            rollSet.removeClass('fixed')
        }
    })
</script>

Method description:
The total height of the page minus the scrolling height minus the height of the layer with the widget ID is equal to the height from the bottom of the layer to the bottom.
When the height from the bottom is less than or equal to the height from the bottom of a particular position, remove the style fixed, and then add absolute positioning to the layer!
CSS to add position:relative to the parent layer;


Related articles: