ページをスクロールした時にJSで一時的に要素を固定したい

Question

###前提・実現したいこと
現在AWA のLPを参考にしてwebsiteを作成しています。
このサイトのLPではスクロールした時に一時的に各セクションの要素が固定され、スクロールをしても数pxの間スクロールせずに固定され、一定のスクロール量をいくと再びスクロールが効くようになる効果が実装されており、このスクロールの効果を実装したいと考えています。

###ソース
サンプルで作成しているものがありますので、こちらをご参照いただけますと幸いです。

jquery.stickystack.jsでAWAと同等の効果を実装していますが、各セクション間で一時的に固定されず、すぐに次のセクションに移ってしまいます。

###補足
上記JSは以下から参照しております。
https://github.com/mike-zarandona/StickyStack.js

よろしくお願いいたします。

Comments

[koronatail]

実装方法が全く違うように見えますがStickyStack.jsでAWAと同様の動きになるようにしてほしいということなのでしょうか。

[YumaYamada]

はい、仰るとおりです。

[Lhankor_Mhy]

ご提示のプラグインはパララックス効果にあまり向いていないと思いますので、ほとんどスクラッチで書くようになると思うのですが……　他にjQueryプラグインはいろいろあると思いますので、あまりこだわらない方がいいと思います。

Answer 1

自己解決しました。
上記StickyStack.jsでStuckする要素の間にheightを設けた要素を挿入し、それらをスクロールさせることで再現ができました。

<div class="section section-1 align-bottom">
(略)
  </div>
<div class="stuck-margin" ></div>/*heightを設けた要素*/
<div class="section section2 align-bottom">
(略)
  </div>
<div class="stuck-margin" ></div>/*heightを設けた要素*/
<div class="section section-3 align-bottom">
(略)
  </div>

.stuck-margin{
  height: 50vw;
  width: 100%;
}