Блог

Главная - Вопросы по программированию - Создание липкого div с помощью jquery

Создание липкого div с помощью jquery

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

В настоящее время я работаю над магазином Shopify и пытаюсь создать липкий div с помощью jquery, но не могу этого сделать. Вот мой код, пожалуйста, посмотрите, правильно ли я делаю??

 <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>

Комментарии:

1. Теперь вам может понадобиться jQuery или JavaScript: попробуйте использовать position: sticky вместо absolute. Он поддерживается всеми основными браузерами (кроме IE11, конечно) caniuse.com/#search=position sticky

2. Я уже пробовал это, но не работает

Ответ №1:

У вас опечатка в этой строке:

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

Удалите запятую, и это сработает:

 $("#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>