Skip to content

Instantly share code, notes, and snippets.

@jerinisready

jerinisready/affix_price_bar.html

Last active June 26, 2019 08:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jerinisready/4dbfcd03ea6bf95828541de229c664f9 to your computer and use it in GitHub Desktop.
Save jerinisready/4dbfcd03ea6bf95828541de229c664f9 to your computer and use it in GitHub Desktop.
Download ZIP
How To Create A Bottom Bar Affix using Jquery and Css
Raw
affix_price_bar.html
<DOCTYPE html>
<head>
<title> Affix Price Bar </title>
<style>
#price_bar_container{}
#bottom-price-bar{position: fixed; margin-left: 260px; margin-bottom: 0; padding:0; }
#bottom-price-bar .card{ border-radius: 1px; transition: all 0.15s ease-in-out;}
#bottom-price-bar:not(.affix-bottom) .card{ border-radius: 1px; box-shadow: 0 -1px 14px 0 rgba(0, 0, 0, 0.30); }
#bottom-price-bar b{ font-size: large}
#bottom-price-bar.affix-bottom {position: -webkit-sticky; position: sticky; top:unset; margin: 0 !important;}
#bottom-price-bar.affix-bottom .px-5{padding: 0 !important;}
.m-10px{margin: 10px auto auto auto }
.btn-enlarge-on-hover:hover{transform: scale(1.3)}
.pad-td{height: 75px}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12" >
<div class="container">
<div class="table-responsive">
<table class="table table-striped">
<thead ><tr>
<th><input class="form-check-input" type="checkbox" /></th>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Rate</th>
<th scope="col">Quantity</th>
</tr></thead>
<tbody class="table-striped">
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>1</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>2</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>3</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>4</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>5</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>6</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>7</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>8</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>9</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>10</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>11</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>12</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>13</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>14</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>15</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>16</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>17</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>18</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>19</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>20</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>21</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>22</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>23</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>24</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>25</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>26</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>27</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>28</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>29</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
<tr class="pad-td"><td scope="row"> <input class="form-control" type="checkbox" /></td><td>30</td><td >Product Name</td><td ><input value="2345" type="number" class="form-control" /></td><td ><input value="2345" type="number" class="form-control" /></td></tr>
</tbody>
</table>
<hr />
</div>
<div class="row">
<div class="col-12 my-2" >
<span class="pull-right" >This bill contains 30 items. </span>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-6 "></div>
<div class="col-md-5">
<div class="row float-right mt-3">
<div class="col-md-6"><h5 class="text-secondary">Net Gross </h5></div>
<div class="col-md-6"><h5 class="float-right currency" > $ 2225/-</h5></div>
<div class="col-md-12"></div>
<div class="col-md-7"><span class="text-secondary">Tax Amount</span></div>
<div class="col-md-5"><span class="float-right currency" > $ 25 /-</span></div>
<div class="col-md-12"><hr /></div>
<div class="col-md-4"><h4 class="text-secondary">Total</h4></div>
<div class="col-md-8" v-cloak><h4 class="float-right currency" > $ 2250 /- </h4></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><hr /></div>
<div class="col-12" id="price_bar_container">
<div id="bottom-price-bar" v-if="total_g_value" class="fixed-bottom heartBeat animated" >
<div class="content">
<div class="container-fluid px-5 m-10px">
<div class="row " >
<div class="col-12 " >
<div class="card px-4 py-3 m-10px" >
<div class="row" >
<div class="col-3 my-auto" >
<b >Net : <span class="currency" > $ 2225 /-</span></b>
</div>
<div class="col-3 my-auto" >
<b >Total : <span class="currency" > $ 2250 /-</span></b>
</div>
<div class="col-3 my-auto"></div>
<div class="col-3 my-auto">
<span class="btn btn-danger btn-enlarge-on-hover "> Generate Bill </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let bar_container = $('#price_bar_container');
let bar = $('#bottom-price-bar');
let bar_static_position = 0;
let bar_child_height = $('#price_bar_container div').innerHeight();
bar_container.height(bar_child_height + 'px');
$(document).resize(e => {bar_static_position = $('#bottom-price-bar').get(0).getBoundingClientRect().top;});
$(document).resize(); // trigger
$(window).scroll(e => {
let bar_container_top = document.querySelector('#price_bar_container').getBoundingClientRect().top;
if (!(affix_class in document.querySelector('#bottom-price-bar').classList)){
// update ${bar_static_position} if bar is in ditached condition. no need to recompute. just had it!
bar_static_position = document.querySelector('#bottom-price-bar').getBoundingClientRect().top
}
if (bar_container_top < bar_static_position) {
document.querySelector('#bottom-price-bar').classList.add(affix_class);
}else{
document.querySelector('#bottom-price-bar').classList.remove(affix_class);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment