sticky tab on bottom

by magizter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
      <div id="headerText">Welcome to the Website</div>
      <div id="fixed">
        <div class="sticky">
<h4 >
<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Sticky tab</a>
</h4>


<div class="tab-content collapse" id="collapseExample">
Lorem ipsum dolor<br>
Curabitur pharetra sollicitu<br>
 ullamcorper, felis tellus <br>
 Phasellus arcu libero
</div>
</div>


        </div>
      </div>
    </header>
  
    <div class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus aliquam arcu, sed faucibus metus laoreet et. Aliquam posuere pellentesque convallis. Integer eget urna sit amet mi hendrerit consequat a sed elit. Nullam rutrum risus quis velit bibendum sit amet iaculis purus viverra. In ultricies posuere nunc eget ornare. Donec metus nunc, gravida ac auctor in, tincidunt nec odio. Sed non diam purus. Cras lobortis dui eu est rhoncus rutrum. Donec vulputate interdum augue, ac tristique purus scelerisque vitae. Phasellus vitae tellus elit. Nulla eu condimentum leo. Mauris at porta augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      
      Sed commodo laoreet quam, id ultrices leo placerat et. Proin vel nisi ac elit tempor ullamcorper. In ac nisi non sem interdum molestie at a felis. Phasellus eu faucibus dolor. Donec vel ligula urna. Ut faucibus lorem eu augue interdum fermentum. Nunc euismod justo vitae sapien tristique pulvinar. Vestibulum consequat iaculis tellus consectetur porta. Curabitur cursus, sapien rutrum hendrerit luctus, lacus augue aliquet nisi, nec auctor urna orci vel dolor. Phasellus viverra tincidunt erat id malesuada. Ut pellentesque, enim eget vulputate lobortis, mauris risus mattis elit, a euismod leo nisi in erat....

CSS

body {
        margin: 0px;
      }
      
      .sticky {display: inline block;}
      h4 {padding: 10px}
      .tab-content {padding: 10px;margin-bottom: -100px; background-color: white; color: red}
      
      header {
        background: black;
        color: white;
      }

      #headerText {
        height: 50px;
      }

      #fixed {
        position: fixed;
        background: black;
        color: white;
        bottom: 0px;
 
        right:10%;
      }

      li {
        float: right;
      }

      .main {
        margin-top: 25px;
      }

JavaScript

$(window).scroll(function(event) {
    
    // height of the document (total height)
    var d = $(document).height();
    
    // height of the window (visible page)
    var w = $(window).height();
    
    // scroll level
    var s = $(this).scrollTop();
    
    // bottom bound - or the width of your 'big footer'
    var bottomBound = 150;
    
    // are we beneath the bottom bound?
    if(d - (w + s) < bottomBound) {
        // if yes, start scrolling our own way, which is the
        // bottom bound minus where we are in the page
        $('#fixed').css({
            bottom: bottomBound - (d - (w + s))
        });
    } else {
        // if we're beneath the bottom bound, then anchor ourselves
        // to the bottom of the page in traditional footer style
        $('#fixed').css({
            bottom: 0
        });            
    }
});