stellar.jsはウィンドウ上の要素オフセットを再調整できますか？

Question

ブラウザ/ウィンドウのサイズ変更でstellar.jsを再初期化して要素のオフセットを再調整する方法はありますか？

Answer 1

ちょっと酔っ払った後、私はこれを考え出した。私の場合、私は私の星の要素を含む 'スライド'を持っており、ビューポートの全幅/高さにサイズが設定されています。私はタブレットの向きを変更するためにサイズを変更する必要がありました。

$(window).resize(function(){ 
    winHeight = $(window).height(); 
    $("#scrollWrapper > div").height(winHeight); 

    // Find out all my elements that are being manipulated with stellar 
    var particles = $(window).data('plugin_stellar').particles; 

    // Temporarily stop stellar so we can move our elements around 
    // data('plugin_stellar') let's me access the instance of stellar 
    // So I can use any of its methods. See stellar's source code 
    $(window).data('plugin_stellar').destroy(); 

    $.each(particles, function(i, el){ 
     // destroy() sets the positions to their original PIXEL values. 
     // Mine were percentages, so I need to restore that. 
     this.$element.css('top', ''); 

     // Once the loop is finished, re-initialize stellar 
     if(particles.length - 1 == i){ 
      $(window).data('plugin_stellar').init(); 
     } 
    }); 
}); 

それは要素が左/トップのための彼らの元の画素値に設定し得ることを問題ではない場合は、あなただけの他の後&のinit 1を破壊呼び出すことができます。

$(window).data('plugin_stellar').destroy(); 
$(window).data('plugin_stellar').init(); 

あなたの場合要素（すなわち、$.stellar();の代わりに$("#element").stellar();）に星をインスタンス化して、「window」をセレクタに置き換えます。あなたが水平方向の配置（それは垂直サイトだと仮定した場合）に問題がある可能性がありますように

Answer 2

まず第一に、それが聞こえます。もしそうなら、それはあなたが唯一の水平方向のスクロールを無効にする必要があると考えられます。これで問題が解決しない場合は

$.stellar({ 
    horizontalScrolling: false 
}); 

、Stellar.jsはあなたがプラグインを更新することを可能にする文書化されていない機能があります。例えば

、あなたがこのようStellar.jsを使用と仮定してみましょう：あなたは次のようにそれを更新することができ

$.stellar(); 

：

$.stellar('refresh'); 

ので、サイズ変更でそれをリフレッシュするために、あなたが行うことができます

$(window).resize(function() { 
    $.stellar('refresh'); 
}); 

うまくいけば、これはすべてあなたのために修正されるはずです。

Answer 3

Iはまた、ロケーションバーが再び見えるようになるときに、下にスクロールするときのFirefox/ChromeはWebViewのサイズを変更により引き起こされる可能性がモバイルに奇数オフセットを気づきましたか？

あなたの質問への答えはdocumentationのセクションにある「設定のすべて」：

// Refreshes parallax content on window load and resize 
responsive: false, 

だから、これはデフォルトではfalseです。これを有効にするには、...本当の問題がある.stellar({responsive:true})

を使用する理由これは、デフォルトでは無効になっているのですか？ iOSを除いて私が気づいていた問題を修正するように見えました。