jquery - スクロールホイールを使用してjQueryスクロールする

Question

そのため、プラグインが私が求めていることを実行するのを見るだけでなく、機能を機能させる方法の始まりを把握しようとしています。たとえば、このプラグインは、ナビゲーションでこれらの div リンクをクリックすると「ジャンプ」します。私が望むのは、div の特定の部分に到達すると、div の残りの部分にジャンプすることです。これにより、ナビゲーション バーを完全に切り取りますが、記事/写真などの残りの部分に到達するためにイージングを利用します。

現在、 Richard Shepardによる視差用のスクリプトを使用しています。スクリプトを拡張して backgroundPosition: 座標を使用してイベントへのスクロールをトリガーしたいと考えています。

便宜上、彼のコードを貼り付けました。

PSこのコードはすべて「本来の」ように機能していますが、div間のイージングが不足しており、現在インストールされている jquery.easing にあります。

PPS とはいえ、どこから始めればよいかわかりません。そのため、ページ上のユーザーの場所を既に取得している関数から始めることにしました。

// On your marks, get set...
$(document).ready(function(){
console.log("loaded parallax");

// Cache the Window object
$window = $(window);

// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){

    // Store some variables based on where we are
    var $self = $(this),
        offsetCoords = $self.offset(),
        topOffset = offsetCoords.top;

    // When the window is scrolled...
    $(window).scroll(function() {

        // If this section is in view
        if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
             ( (topOffset + $self.height()) > $window.scrollTop() ) ) {
            // console.log("scrolling background");

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!
            var yPos = -($window.scrollTop() / $self.data('speed'));

            // If this element has a Y offset then add it on
            if ($self.data('offsetY')) {
                yPos += $self.data('offsetY');
            }

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $self.css({ backgroundPosition: coords });

            // Check for other sprites in this section
            $('[data-type="sprite"]', $self).each(function() {

                // Cache the sprite
                var $sprite = $(this);

                // Use the same calculation to work out how far to scroll the sprite
                var yPos = -($window.scrollTop() / $sprite.data('speed'));
                var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';

                $sprite.css({ backgroundPosition: coords });

            }); // sprites

        }; // in view

    }); // window scroll

}); // each data-type

}); // document ready

// If this section is in view セクション内のコードの先頭は次のとおりです。

                var windowheight = jQuery(window).height();
                // console.log(yPos);

                if (Math.abs(yPos) > windowheight/2) {
                    console.log("scrollto");
                    jQuery('#fourth').ScrollTo();
                }