1

私はいたるところを調べましたが、これまでのところ、これを処理するjQuery以外のjsは見つかりませんでした。この1つの単純なタスクだけにライブラリを使用することは避けたいと思います。

3つのナビゲーションdiv（ "#header"、 "＃tabs"、 "＃footer"）をビューポート左（または、div"#helper"のx位置に"position：fixed; left： 0; top：0; "）-ただし、yを修正しません。垂直に固定することはできません。

スクロールに基づいてdivを強制的に再配置する動作するjsを作成しましたが、実際のページではスムーズではありません（動的要素とグラフィック要素が多すぎます）-スムーズにアニメーション化するか、固定を模倣します-左とまったく再配置されていないようです。

ポインタや簡単なスクリプトを提供したり、私が作成したスクリプトを確認して変更したりできる人はいますか？質問に答える代わりに、なぜ明白な解決策が使用されないのかと人々が尋ねる傾向があることに気づきました...私は喜んで答えますが、実際の問題の助けを望んでいます。

問題のあるjsFiddleは次のとおりです。http：//jsfiddle.net/BMZvt/6/

助けてくれてありがとう！

4

3 に答える 3

3

スムーズなアニメーションの例：

var box = document.getElementById('box');

var moveTo = function(obj, target) {
    // start position
    // you should obtain it from obj.style
    var cpos = {
        x: 0,
        y: 0
    }        
    var iv = setInterval(function(){
        cpos.x += (target.x - cpos.x) * 0.3; // 0.3 is speed
        cpos.y += (target.y - cpos.y) * 0.3; // 0.3 is speed
        obj.style.left = Math.floor(cpos.x) + 'px';
        obj.style.top = Math.floor(cpos.y) + 'px';
        var dist = Math.abs(cpos.y - target.y); // distance (x+y) from destination
        dist += Math.abs(cpos.x - target.x); // < 1 = object reached the destination

        if(dist < 1) { // here we are checking is box get to the destination 
           clearInterval(iv);
        }
    }, 30); // this is also the speed
}

box.onclick = function(){
    moveTo(box, {x: 90, y: 75}); // fire this function to move box to specified point
}

あなたのスクリプトはあなたの仕事ですが、これはアニメーションの問題を解決する方法のクイックスタートです

sin(x)また、速度を設定するために使用するなど、速度を使っていくつかの凝ったことを行うこともできます

于 2012-08-21T19:33:29.547 に答える
0

これは、この投稿を閲覧する人向けです。私は、単純なjavascriptを使用して固定xを模倣するjsFiddleに最初にまとめたソリューションを使用することになりました。

最初の回答のJavaScriptは重くてバグが多く、2番目の回答は良さそうに聞こえましたが、実際には機能しませんでした。したがって、javascriptライブラリを使用せずに固定されたxと流動的なyに対する最良の答えとして、jsFiddle（下記）のjavascriptをお勧めします。完璧ではなく、遅延も最小限ですが、私が見つけた最良の答えです。

function fixLeft() {

            function getScrollX() {
                var x = 0, y = 0;
                if( typeof( window.pageYOffset ) == 'number' ) {
                    x = window.pageXOffset;
                } else if( document.body && ( document.body.scrollLeft) ) {
                    x = document.body.scrollLeft;
                } else if( document.documentElement && ( document.documentElement.scrollLeft) ) {
                    x = document.documentElement.scrollLeft;
                }
                return [x];
            }

            var x = getScrollX();
            var x = x[0];

        // have to get and add horizontal scroll position px
        document.getElementById('header').style.left = x + "px";
        document.getElementById('tabs').style.left = x + "px";
        document.getElementById('footer').style.left = x + "px";
    }

    window.onscroll = fixLeft;
于 2013-01-12T02:40:06.147 に答える
0

これを行う簡単な方法はないと思います...

しかし、ここに方法があります。

まず、window.onscrollイベントが発生したときに、スクロールの方向を検出できる必要があります。これを行うには、スクロールイベントが発生するたびに、現在のページオフセットを新しく取得したページオフセットと比較します。（http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction）

ここで、スクロールの方向がわかっていて、スクロールの方向に応じてdivのスタイルを変更したいとします。

FixAtXを、 divを修正するx座標の値とします。OriginalYをdivのy座標とします。また、スクロールが発生するたびに、方向に関係なく、ページオフセットXとYを覚えておきたいと思います。それらをOldXとOldYと呼びましょう。

垂直方向にスクロールする場合：

  • divのスタイルの位置の値を絶対値に設定します。
  • divのスタイルの上限値をOriginalYに設定します
  • divのスタイルの左側の値をOldX+FixAtXに設定します

水平方向にスクロールする場合：

  • 修正するdivのスタイルの位置の値を設定します。
  • divのスタイルの最上位値をOriginalY-OldYに設定します （<-これは、ブラウザーがpageOffset値を計算する方法によって異なる場合があります）
  • divのスタイルのLeft値をFixAtXに設定します

これでうまくいくと思います...ポジショニングにブラウザのレンダリングを使用しているだけなので、非常にスムーズなはずです。

質問を正しく理解したことを願っています。

于 2012-08-21T20:09:08.373 に答える