javascript - 如何从 HC-Sticky 插件运行方法？

转载作者：行者123 更新时间：2023-11-28 14:55:14

我正在使用 HC-Sticky JavaScript 插件并尝试使用 documented reinit 方法，但我不明白如何运行它。

这是一个CodePen显示了一个非常基本的设置，并尝试在初始化后立即运行 reinit 方法，但控制台始终显示

reinit function is not defined

在这种情况下，您通常如何运行方法？

最佳答案

将您的 HC-Sticky 实例存储在一个变量中，然后您就可以使用 HC-Sticky 的 API:

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>