Vue.jsでのスクロール感知
スクロール位置を判定したパーツの表示に利用。 下記ソースではスクロール値が200pxに達すると、divに対して「isVue」クラスを付与。 handleScroll()でwindow.scrollYを指定すると、横スクロールが取得できる。 ◆hrml <div v-bind:class="{ isView: isView }"> ◆vue new Vue({ el: '#app', d […]
スクロール
ウィンドウのスクロール位置をjs+Cookieで保存する
ページをまたいだ場合、ページでリロードを行う処理をする場合に表示位置を固定したい場合に用いる。 記述例）Cookieを保存するjsにより、変数指定が若干変わる。下記はそれぞれ案件に併せて若干修正済。 ■https://github.com/js-cookie/js-cookie を使用する場合 <script> $(function(){ var key = 'keep-positio […]
スクロール上下の取得
// スクロール上下の取得 var start_pos = 0; function scrollUpdown() { var current_pos = $(this).scrollTop(); if (current_pos > start_pos) { console.log('down'); } else { console.log('up'); } start_pos = curre […]
スクロールに合わせて要素を表示する
- 2016.10.24
- スクロール
<script> $(function(){ var setElm = $('.scrEvent'), delayHeight = 100; setElm.css({display:'block',opacity:'0'}); $('html,body').animate({scrollTop:0},1); $(window).on('load scroll resize',funct […]
スクロール位置を取得する
- 2016.10.24
- スクロール
// スクロール位置取得 var scrollPosTop = $(window).scrollTop(); //ウインドウTOP var scrollPosUnder = $(window).scrollTop() + $(window).height(); // ウインドウ下部 取得は、ロード時、スクロール時、リサイズ時に行う $(window).on('load scroll resize' […]