title: Body text is hidden when div is sticky at bottom
body: <p>I'm tried to fix sticky on bottom of the page using javascript/jquery but the sticky is hidden the body text. I need to show all body text without hidden along with sticky, I'm not able to figure out the issue, pls anyone suggest me what is the issue in my code.</p>
  
  <p><a href="https://codepen.io/burner/pen/pLyOjX" rel="nofollow noreferrer"><strong>CodePen Link</strong></a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var link = $('#navbar');
  var offset = link.offset();
  var top = offset.top;
  var left = offset.left;
  var bottom = $(window).height() - top - link.height();
  bottom = offset.top - bottom;
  var right = $(window).width() - link.width();
  right = offset.left - right;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #fff;
    min-height: 50px;
    max-height: 150px;
  
    overflow: hidden;
    background-color: #333;
  }
  </code></pre>