खिड़की का आकार बदलने पर 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 एक को नष्ट कॉल कर सकते हैं:

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

आप तो $.stellar(); के बजाय तत्व पर तत्काल तारकीय (यानी $("#element").stellar();) फिर अपने चयनकर्ता के साथ "विंडो" को प्रतिस्थापित करें।

Answer 2

सबसे पहले, ऐसा लगता है कि आपको क्षैतिज संरेखण के साथ कोई समस्या हो सकती है (माना जाता है कि यह एक लंबवत साइट है)। यदि हां, तो यह संभव है कि आप केवल क्षैतिज स्क्रॉल को निष्क्रिय करने की जरूरत है:

$.stellar({ 
    horizontalScrolling: false 
}); 

तो इससे आपकी समस्या का समाधान नहीं होता है, Stellar.js एक गैर-दस्तावेजी विशेषता यह है कि आप प्लगइन को ताज़ा करने की अनुमति देता है।

उदाहरण के लिए, मान लें कि आप इस तरह Stellar.js प्रयोग किया है:

$.stellar(); 

आप इसे निम्नलिखित के साथ ताज़ा कर सकते हैं:

$.stellar('refresh'); 

तो, आकार बदलने पर यह ताज़ा करने के लिए, तुम कर सकते हो इस तरह कुछ:

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

उम्मीद है कि यह आपके लिए सब कुछ ठीक करना चाहिए।

Answer 3

मैंने मोबाइल पर अजीब ऑफ़सेट भी देखा है जो स्क्रॉल करते समय फ़ायरफ़ॉक्स/क्रोम वेबव्यू का आकार बदलता है, जब स्थान बार फिर से दिखाई देता है?

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

तो, यह डिफ़ॉल्ट रूप से गलत है:

अपने प्रश्न का उत्तर documentation के एक खंड में है: "का विन्यास सब कुछ"। इसे सक्षम करने के लिए, .stellar({responsive:true})

वास्तविक प्रश्न यह है कि यह डिफ़ॉल्ट रूप से अक्षम क्यों है? आईओएस को छोड़कर, मैं जिस समस्या को देख रहा था उसे ठीक करना प्रतीत होता था।