JointsWP4 (SASS): स्टिकी में गुण बदलना

Question

TL; DR: क्या स्टिकी वास्तव में जावास्क्रिप्ट के माध्यम से मेरे द्वारा दिए गए परिवर्तनों पर प्रतिक्रिया करने में सक्षम है? यदि हां, तो कैसे?

(यह प्रोजेक्ट फाउंडेशन 6.2 और वर्डप्रेस 4.4 का उपयोग कर रहा है, Node.js / npm और gulp 4.0 का उपयोग करके स्थापित थीम। मेरे सवालों के बारे में विस्तार से, बोल्ड प्रिंट में चिह्नित हैं।)

मैं navफाउंडेशन के स्टिकी प्लगिन का उपयोग करके बार को चिपचिपा बनाना चाहता हूं , लेकिन केवल जब मैं एक बटन पर क्लिक करता हूं। इसका मतलब है कि जब DOM सब खत्म हो जाता है, तो navबार को "खुद से" चिपकना नहीं चाहिए, लेकिन दस्तावेज़ में इसके शीर्ष स्थान पर रहें। इसके अलावा, नीचे स्क्रॉल करते समय यह गायब हो जाना चाहिए, लेकिन स्क्रॉल करते समय छड़ी।

navबार सही ढंग से सभी आवश्यक में लपेटा जाता है div, रों इसलिए navबार छड़ी करने में सक्षम है। समस्याएं "अतिरिक्त" भाग के साथ उत्पन्न होती हैं। मेरा विचार पहले PHP का उपयोग करके स्टिकी को तत्काल करना था:

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

उसके बाद, data-btm-anchorजावास्क्रिप्ट का उपयोग करके वर्तमान स्क्रॉल स्थिति में परिवर्तन करें जो कि क्लिक पर निकाल दिया गया है। यह काम नहीं करता था और साथ ही मैं चाहूंगा। मैंने अब तक क्या प्रयास किया है:

1. उपयोग करते समय getElementByIDऔर फिर setAttribute, data-btm-anchorPHP फ़ाइल में फायरबग के अनुसार परिवर्तन होता है, लेकिन यह navबार को थोड़ा प्रभावित नहीं करता है ; यह जहां है वहीं रहता है। क्या मुझे स्टिकी को "बहाल" करने की आवश्यकता है, और यदि हां, तो कैसे?
2. डॉक्स का उल्लेख:

जावास्क्रिप्ट के साथ विकल्प सेट करना एक वस्तु को कंस्ट्रक्टर फ़ंक्शन में पास करना शामिल है, जैसे:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

इसका मतलब है कि मैं पहले से मौजूद प्लगइन उदाहरण में नए मापदंडों को पारित कर सकता हूं ? जब भी मैंने Foundation.Stickyएक अलग वस्तु btmAnchor से अधिक कुछ नहीं के साथ एक नई वस्तु पारित की मेरे विकल्प सरणी पैरामीटर मेरे लिए jQuery('#sticky_header'), कुछ भी नहीं हुआ।

3. डॉक्स भी प्रोग्राम के रूप में प्रस्ताव मेरे "sticky_header" करने के लिए स्टिकी जोड़ने। यदि वह काम करता है, तो मैं सीधे jQuery ऑब्जेक्ट को बदलने की कोशिश कर सकता हूं। अब तक मैं अपने हेडर से स्टिकी प्लगइन को सफलतापूर्वक बांधने में सक्षम रहा हूँ:

   1. .js को फेंकना जिससे बटन अपने कार्य को assets/js/scriptsचालू करता है (और फिर चल रहा है gulp)
   2. मेरे द्वारा सभी डेटा-चिपचिपे टैग हटाए जा रहे हैं <header class="header">, इसलिए DOM के लोडिंग समाप्त होने पर हेडर में कोई भी चिपचिपा प्लगइन पंजीकृत नहीं है

   3. प्रोग्राम को प्लगइन जोड़ना:

      function button_fire(){
        var options = {
          topAnchor:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }
      

   हेडर अब Firebug के अनुसार "चिपचिपा" वर्ग प्राप्त करता है। लेकिन यह अभी भी काम नहीं करता है - बल्कि, यह गड़बड़ करता है: "हेडर स्पेस" कुछ हद तक ढह गया है, इसलिए यह divनीचे "सामग्री" को थोड़ा कवर कर रहा है । तुम्हें क्या पता, हैडर चिपकता नहीं है। क्या वह बग है?

   मान लीजिए कि यह अब "शानदार ढंग से" काम करेगा, क्या मैं सैद्धांतिक रूप से डेरेफ़रिंग var stickया उपयोग करके jQuery('#sticky_header')या विशेषताओं को बदलने में सक्षम हूं jQuery('.header')?

इन सब से ऊपर, jQuery काम नहीं करता है जैसा कि इसे करना चाहिए। मुझे $अपनी लिपियों में उपयोग करने में बहुत समस्याएँ हैं, और मैं उदाहरण के लिए, destroy()स्टिकी की विधि को नहीं चला सकता क्योंकि इस वजह से (यदि यह काम करता है, तो मैंने स्टिकी के एक उदाहरण को नष्ट कर दिया हो सकता है एक नया btmAnchorएक नया स्क्रॉल स्थिति के लिए सेट)। मैं इसके लिए एक और सवाल खोलूंगा।

Comments

खोज करने पर, वास्तव में कोई wp_enqueue_script () फंक्शन कॉल है जो स्पष्ट रूप से jQuery को बढ़ाता है, इसलिए अब मैंने संपत्ति / कार्यों / enqueue-script.php में लिखा है: wp_enqueue_script( 'jquery' ); फिर भी पहले की तरह ही समस्या है, दुर्भाग्य से। या मैंने गलत तरीके से jQuery का एनकाउंटर किया? क्या JointsWP के अपने कुछ jQuery के काम हैं?

— सैम्युअल एलओएल हैकसन

वर्डप्रेस स्वचालित रूप से jQuery को बढ़ाता है, इसे अपने दम पर एनक्यू करने की कोई आवश्यकता नहीं है। इसके अलावा, "jQuery" सही है - लेकिन $ को अभी भी काम करना चाहिए। वर्डप्रेस jQuery को बिना किसी संघर्ष मोड में चलाता है, यही कारण है कि $ के बजाय "jQuery" का उपयोग किया जाता है।

— जेरेमी

तो क्या इसका मतलब यह है कि "$" के बजाय "jQuery" लिखना ऐसा करने का पसंदीदा तरीका है और इसे उसी तरह से काम करना चाहिए? (मैं jQuery के लिए नया हूँ) (साथ ही, JointsWP, जेरेमी पर बहुत अच्छा काम! :) बिल्कुल प्यार।)

— सैम्युएल एलओएल हैकसन

@SamuelLOLHackson, आप वर्डप्रेस में "$" का भी उपयोग कर सकते हैं, हालांकि, या तो आपको इसे इस तरह से jQuery को असाइन करना होगा: var $ = jQueryया इसे कॉलिंग पर पास करना होगा। () विधि इस तरह से:jQuery(document).ready(function($){ //your code here with using $ or jQuery });

— निकोला किरकिरा

मैं बहुत आश्चर्यचकित हूं, मेरे पास एक सवाल था और जवाब देने के लिए 500 इनाम छोड़ दिया, और सही और पूर्ण उत्तर पर पहुंच गया, यह सवाल 2 साल पहले का है और कोई इनाम नहीं है। आपकी नम्रता के लिए धन्यवाद।

— अमेरिकलीका

Answer 1

आप बस अपने scss में चिपचिपे css विशेषता का उपयोग कर सकते हैं।

Html या php में अपने कंपोनेंट में क्लास जोड़ें:

<div data-sticky-container class="sticky-container">

और scss या css में:

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

अब बस आपको जरुरत है ऊपर से दुरी की!

Answer 2

पूरी तरह से jquery का उपयोग करके चिपचिपा को नियंत्रित करना पसंद करें।

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

इसका उपयोग करके आप अपनी वेबसाइट के किसी भी हिस्से में एक बटन स्क्रॉल कर सकते हैं।

स्टिकी के लिए, आप चिपचिपे वर्ग को केवल तब जोड़ना चाहते हैं जब आप पहले सेक्शन को स्क्रॉल करते हैं:

$(document).ready(function(){
    $(<Section name after which you want sticky to appear>).waypoint(function(direction){
        if (direction == "down"){
           $('nav').addClass('sticky');
           }else{
               $('nav').removeClass('sticky');
           }
    }, {
        offset: '60px'
    });

});

वेपॉइंट्स प्लगइन का उपयोग करते हुए, अब आप आसानी से किसी तत्व या अनुभाग को स्क्रॉल करने पर चिपचिपा वर्ग जोड़ सकते हैं। # और का उपयोग करके jquery चयनकर्ता आईडी और वर्ग द्वारा चयन कर सकते हैं। क्रमशः।

Answer 3

यदि आप wordpress का उपयोग करते हैं, तो यह JQuery को स्वचालित रूप से एनक्लोज करता है।

आपके पास वर्डप्रेस में JQuery का उपयोग करने के दो तरीके हैं।

$ के बजाय JQuery का उपयोग करें

Wordpress अपने J संघर्ष मोड में JQuery चलाता है ताकि आपको $ के बजाय Jquery का उपयोग करना पड़े

आपका मुकदमा

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options);

एक चर की तरह $ का उपयोग करें

आप $ का उपयोग भी कर सकते हैं लेकिन आपको इस तरह एक चर को परिभाषित करना होगा:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);