Prevent bootstrap affix overlapping with footer

Prevent bootstrap affix overlapping with footer

Fixing a div to the right side of your web page using
bootstrap’s affix method is easy.

Steps required are
1)Add data-spy=”affix” to the div you would like to fix in the right side. Also Add a class to the div, in the example i added the class as my-affix-div.
The whole affix div code is given below.

<div class="col-sm-5 pull-right my-affix-div" 
        data-spy="affix"  >
        <div class = "panel 
                panel-primary 
                panel-transparent affix_div" >
            <div class ="panel-heading">
                <h3 class = "panel-title">Summary</h3>
            </div>

            <div class = "panel-body">
                <div class="row">
                    <div class="col-sm-4">
                        <b>Name</b>
                    </div>

                    <div class="col-sm-3">
                        <b>Place</b>
                    </div>

                    <div class="col-sm-3">
                        <b>Phone</b>
                    </div>                  
                </div>
  
            </div>

            <div class = "panel-footer">
                <form role="form" action="#"
                     method="get">
                    <button type="submit" 
                          class="btn btn-default"
                    >
                        Clear
                    </button>
                </form>
            </div>

        </div>
    </div> 

2)Then add the below Javascript code.

$('.my-affix-div').affix(
   {offset:{top: 75, bottom: 240}}
);

In the code we specified when the div should be fixed.
If the scroll top is more than 75 pixel, then the div with the class name my-affix-div will be fixed. If we scroll to the bottom and if the distance from bottom to the div is less than 240,
the div’s position becomes absolute.

At any moment the div with data-spy=”affix” , will be in one of the three states.
1)affix-top: If your scroll top is less than 75px.
2)affix: (If your scroll top is more than 75 px
and scroll bottom is more than 240 ).
3)affix-bottom: if your scroll bottom is less than 240.
We can specify styles of those states. Below CSS code is added to specify that the position should be absolute in both
affix-bottom and affix-top states. in affix state, the div will be fixed to the right side and distance to the top of the div will be
200px.

.affix-bottom{
    position: absolute;
    right: 0;  
}
.affix-top{
    position: absolute;
    right: 0;  
}
.affix {
        top: 200px;
        right: 0;  

 }