2

ユーザーがページを下にスクロールするのと同じピクセル数で div を上にスクロールしようとしています。たとえば、Google Chrome でマウス ホイールを使用すると、約 20px 間隔で下にスクロールします。ただし、ハンドルを使用して下にスクロールすると、スクロール量が異なります。

これまでの私のコードは次のとおりです。

var scrollCtr = 50;
$(window).scroll(function(){
   scrollCtr = scrollCtr - 20;
   $('div.nexus-files').css('margin-top', scrollCtr + 'px');
});

これにはいくつかの問題があります。

  1. ユーザーのスクロールはさまざまです
  2. 下にスクロールする場合はmargin-topから減算し、上にスクロールする場合はmargin-topに追加する必要があります

以下に例を示します: http://www.enflick.com/

助けてくれてありがとう

4

3 に答える 3

2

あなたは間違った方法でやっています。あなたがやろうとしていることはposition: fixedonを使って行うべきですdiv.nexus-files

div.nexus-files{position: fixed; top: 0;}

とにかく、スクロールイベントで何ができるかを知りたい場合scrollTopは、ドキュメントを取得しmargin-topて同じ値に設定することをお勧めします

window.onscroll = function(event){
    var doc = document.documentElement, body = document.body;
    var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    document.getElementById('nexus-files_id').style.marginTop = top+'px';
}

私は jQuery の代わりに純粋な Javascript を使用しています。これは、ブラウザが非常に短い時間 (スクロール中) に何かを計算する必要がある場合に重要なオーバーヘッドになる可能性があるためです。[これは、要素とドキュメントへの参照を保存することでさらに効率的に行うことができます...しかし、ご存知のとおり..)

クラスベースではなく、IDベースのセレクターを使用して特定の要素を取得しました

繰り返しますが、これはあなたがやろうとしていたことを行うべき方法ではありません

于 2013-04-27T22:13:05.500 に答える
0

ついに手に入れた

これが、タスクを達成するために使用したコードです。

ほとんどのコードはhttp://enflick.comからのもので、個人の状況に合わせて修正しました。

jQuery(window).load(function(){
initParallax();
});

// parallax init
function initParallax(){
var win = jQuery(window);
var wrapper = jQuery('#wrapper');
var bg1 = wrapper.find('.nexus-files');
var koeff = 0.55;
if (bg1.length) {
    function refreshPosition(){
        var scrolled = win.scrollTop();
        var maxOffsetY1 = 450;
        var offsetY1 = scrolled * koeff;
        var offsetY2 = scrolled * koeff - (maxOffsetY1 * koeff - offsetY1);
        if (offsetY1 <= maxOffsetY1 * koeff - offsetY1) {
            bg1.css("margin-top", +-offsetY1+"px");
            //alert(+-offsetY1+"px");
        }
    }
    refreshPosition();
    win.bind('resize scroll', refreshPosition);
}
}
于 2013-04-27T23:44:24.257 に答える