Как запустить метод из плагина HC-Sticky? - PullRequest
Новая
       10

Как запустить метод из плагина HC-Sticky?

0 голосов
/ 27 июня 2018

Я использую HC-Sticky плагин JavaScript и пытаюсь использовать документированный документированный reinit метод, но я не понимаю, как его запустить.

Вот CodePen , показывающий очень простую настройку и попытку запустить метод reinit сразу после инициализации, но консоль всегда говорит, что

функция повторного запуска не определена

Как вы обычно запускаете метод в этой ситуации?

1 Ответ

0 голосов
/ 27 июня 2018

Сохраните свой экземпляр HC-Sticky в переменной, затем вы можете использовать API HC-Sticky: 

var sticky = new hcSticky('.this-sticks', {
    stickTo: 'main'
});    

sticky.reinit();

ИЛИ доступ к нему через jQuery.data(...): 

jQuery('.this-sticks').hcSticky({
    stickTo: 'main'
});

jQuery('.this-sticks').data('hcSticky').reinit();

Пример 1:

Использование new hcSticky(...)

jQuery(document).ready(function() {
  var sticky = new hcSticky('.this-sticks', {
    stickTo: 'main'

  });      
  sticky.reinit();
});
body {
  margin-top: 300px;
}

header {
  height: 300px;
  background: black;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

section {
  height: 100vh;
  background: #ccc;
}

footer {
  height: 400px;
  background: black;
}

.this-sticks {
  background: blue;
  height: 100px;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HC Sticky Example</title>
</head>
<body>
  <div>
  <header></header>
  <main>
    <section class="this-sticks">sticky</section>
    <section></section>
  </main>
  <footer></footer>  
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://rawgit.com/somewebmedia/hc-sticky/master/dist/hc-sticky.js"></script>
</body>
</html>

Пример 2:

Использование jQuery(...).hcSticky(...)

jQuery(document).ready(function() {
  jQuery('.this-sticks').hcSticky({
    stickTo: 'main'
  });
  
  jQuery('.this-sticks').data('hcSticky').reinit();
});
body {
  margin-top: 300px;
}

header {
  height: 300px;
  background: black;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

section {
  height: 100vh;
  background: #ccc;
}

footer {
  height: 400px;
  background: black;
}

.this-sticks {
  background: blue;
  height: 100px;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HC Sticky Example</title>
</head>
<body>
  <div>
  <header></header>
  <main>
    <section class="this-sticks">sticky</section>
    <section></section>
  </main>
  <footer></footer>  
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://rawgit.com/somewebmedia/hc-sticky/master/dist/hc-sticky.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...