前提・実現したいこと
ポートフォリオサイトでscrollify(jqueryのプラグインメソッド)画面丸ごとスクロールさせる処理をしたいのですが
この時、下にスクロールさせた時だけこの処理を実装したいと考えています。
(つまりしたスクロール時にはscrollifyによって1ページずつスクロールさせて上スクロール時には通常のスクロールにするということです。)
詳しい方いらっしゃいましたら知恵を貸していただきたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題
下方向にスクロールした時だけscrollify の処理を実行したい
スクロールさせたい要素はdivタグで囲んでscrollというクラス名をつけています。またheightは100vhに設定しています。
$(function() { $(window).on('scroll',function(){ winScrollTop = $(this).scrollTop(); $.scrollify({section: ".scroll", //ヘッダー部分だけscrollifyが効かないようにしています interstitialSection: ".header-navs"}); } }); });
試したこと
条件分岐によって実装しようとしましたがうまくいきません。
$(function() { //「startPos」 = 直前までのスクロールの値 //「winScrollTop」 = 現在のスクロール値 var startPos = 0,winScrollTop = 0; $(window).on('scroll',function(){ winScrollTop = $(this).scrollTop(); //直前までのスクロール値より現在のスクロール値が増えているか判別します。 //スクロール値が直前より増えている = 下方向スクロール //スクロール値が直前より減っている = 上方向スクロール if (winScrollTop <= startPos) { $.scrollify({section: ".scroll", interstitialSection: ".header-navs"}); } }); startPos = winScrollTop; });
補足情報(FW/ツールのバージョンなど)
macos catalina
chrome
jquery 3.4.1
scrollify 1.0.19
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー