3

ユーザーがページをスクロールしているときに特定のdivが画面の表示部分/中央に表示されるときに何らかのアクションが発生するjquery機能が必要です。例：Verelo.com。下にスクロールすると、2つのアイコンが付いたグロブと黒い矢印が付いたjqueryアニメーションが表示されます。同様の機能が必要です。正確ではありませんが、少なくとも何かが最も近いとは思いません。

私の努力のために、私はこの例を見つけました：Verelo.comそしていくつかのグーグルをしました。しかし、まだ何も見つかりませんでした。

助けてください。

4

4 に答える 4

4

scrollドキュメントのイベントをリッスンしscrollTop、要素の位置と比較してドキュメントの位置を計算します。

基本的に、要素がビューポートにあるかどうかを計算するために考慮する必要があるパラメーターは (Y 軸スクロールのみを考慮して)、ドキュメントのスクロール位置、ビューポートの高さ、ターゲットの位置です。要素、およびターゲット要素の高さ。

$(window).scroll(function() {

   var scrollTop = $(document).scrollTop();
   var viewportHeight = $(window).height();

   var targetPosition = $('#target').position().top;
   var targetHeight = $('#target').outerHeight();

   // viewport stretches from scrollTop to (scrollTop + viewportHeight)

});

.position().topまた、要素がどのように配置されているか、およびスクロールされているものに応じて、または.offset().topが最も適しているかどうかを判断する必要があります。

デモ

于 2012-06-14T11:49:50.303 に答える
0

jQuery ウェイポイントプラグインはまさにこれを行います。

$('.thing').waypoint(function(direction) {
    // do stuff
}, { offset: 50 })

上記の例では、要素の上部がビューポートの上部から 50px のときにハンドラー関数が実行されます。ユーザーが方向パラメーターで「下」または「上」にスクロールしているかどうかを確認できます。

より高度なオプションと例については、jquery waypoints docs pageを参照してください。

于 2014-01-25T10:20:32.053 に答える
0

あなたができることは、このファイルのソースを分析することですhttp://www.verelo.com/js/themeFunctions.js彼らのサイトから、それは縮小されていないので、彼らがこれをどのように行っているかを掘り下げることができます:

そのjsファイルから必要な関数のリストは次のとおりです

$(window).scroll(function scrollDetection() {
                scrollLogic();
                });

ウィンドウscrollLogic();がスクロールされたときに呼び出されます。今、何がscrollLogic();機能していますか。大きいので必要な部分だけ追加しています

function scrollLogic(){
    //If page is scrolled further than 100%, drop navigation menu from top and do a dance. Preferably an Irish River dance of sorts
    if( $(window).scrollTop() > howItWorksPosition) {
        window.sliderTimerOn = 'false';
        clearInterval(intervalId);

        if( $(window).scrollTop() > howItWorksPosition && $(window).scrollTop() < featuresPosition) {btnClick('.howItWorks'); executeScene(); window.ourCustomersFrame = 'false';}
.......
}

howItWorksPosition使用する前に計算されています

    howItWorksOffset = $('#howItWorks').offset();
howItWorksPosition = howItWorksOffset.top -180;

executeScene();ウィンドウがそのdivまでスクロールされexecuteScene();、アニメーションを実行しているときに呼び出しています。executeScene();彼らがアニメーションをどのように行っているかを確認できます。

于 2012-06-14T12:04:56.640 に答える
0

私はちょうどここでこの質問に答えました笑、要素が見えたら、何かをしてください

https://github.com/protonet/jquery.inviewにあるプラグインは、バインドできるトリガーを提供し、要素がいつ表示されるかを判断します。

于 2012-06-14T11:50:44.610 に答える