sticky element with limit

sticky-with-limit

// write on ES, to write on ES5 change "let" to var
// only for static element with sticky
// TODO: make reusable

$(document).ready(function () {
  
  let el = $('.dynamic-aside-menus')
  let elWidth = $('.dynamic-aside-menus').width(el.parent().width())
  let elHeight = $('.dynamic-aside-menus').height()
  let elPos = el.offset()

  // set the limit
  let limit = $('.footer').offset().top - elHeight - 100;

  $(window).scroll(function () {

      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
          el.css('position', 'static !important')
      } else {
          if ($(window).scrollTop() > elPos.top) {
              // console.log("scroll: "+ $(window).scrollTop())
              el.css({
                  'position': 'fixed',
                  'top': '0',
                  'width': elWidth
              })
          } else {
              el.css({
                  'position': 'static',
                  'width': elWidth
              })
          }

          // console.log("limit: "+ limit)

          // sticky limit
          if ($(window).scrollTop() > limit) {
              // set the limit position
              let limitTopPos = limit - $(window).scrollTop();
              el.css({top: limitTopPos});
          }
      }

  });
});