使用 jquery 制作粘性 div

Question

I am currently working on a shopify store and trying to make a sticky div using jquery but unable to do that. Here is my code please have a look if Iam doing right??

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="assets/jquery.sticky.js"></script> <script> $(document).ready(function(){ $("#fixed").sticky({topSpacing:50}); }); </script>

 <div class="main" style="width:100%;, position:absolute;"> <div class="fixed" id="fixed" style="height: 80px; "> <button class="cart-btn"> IN DEN WARENKORB LEGEN</button> </div> </div>

Answer 1

You have a typo in this line:

<div class="main" style="width:100%;, position:absolute;">
                                   ^^^

Remove the comma and it works:

 $("#fixed").sticky({topSpacing: 50});

 .main { background: #bada55; color: white; font-family: Droid Sans; font-size: 18px; line-height: 1.6em; font-weight: bold; text-align: center; padding: 10px; text-shadow: 0 1px 1px rgba(0,0,0,.2); box-sizing:border-box; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/garand/sticky@master/jquery.sticky.js"></script> <div class="main" style="width:100%; position:absolute;"> <div class="fixed" id="fixed" style="height: 80px; "> <button class="cart-btn"> IN DEN WARENKORB LEGEN</button> </div> </div>