জয়েন্টসডব্লিউপি 4 (এসএএসএস): স্টিকিতে সম্পত্তি পরিবর্তন করা

Question

টিএল; ডিআর: আমি জাভাস্ক্রিপ্টের মাধ্যমে দেওয়া পরিবর্তনগুলিতে স্টিকি কি আসলে প্রতিক্রিয়া জানাতে সক্ষম? যদি তাই হয়, কিভাবে?

(প্রকল্পটি ফাউন্ডেশন 6.2 এবং ওয়ার্ডপ্রেস 4.4 ব্যবহার করছে, থিমটি নোড.জেএস / এনপিএম এবং গুল্প ৪.০ ব্যবহার করে ইনস্টল করা হয়েছে My

আমি navফাউন্ডেশনের স্টিকি প্লাগইন ব্যবহার করে বারটিকে স্টিকি করতে চাই তবে আমি যখন একটি বোতামে ক্লিক করি তখনই। এর অর্থ হ'ল যখন ডিওএম সব শেষ হয়ে যায়, navবারটি "নিজেই" আটকা উচিত নয়, তবে নথিতে তার শীর্ষ অবস্থানে থাকা উচিত। অতিরিক্তভাবে, স্ক্রোল ডাউন করার সময় এটি অদৃশ্য হওয়া উচিত, তবে স্ক্রোলিংয়ের সময় আটকে দিন।

navবার সঠিকভাবে সমস্ত প্রয়োজনীয় জড়িয়ে রাখা হয়েছে div, এস, যাতে navবার বিদ্ধ করতে সক্ষম হয়। "অতিরিক্ত" অংশ নিয়ে সমস্যাগুলি দেখা দেয়। আমার ধারণা হ'ল প্রথমে পিএইচপি ব্যবহার করে স্টিকিটিকে তাত্পর্যপূর্ণ করা:

<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-anchorপিএইচপি ফাইলের ফায়ারব্যাগ অনুসারে পরিবর্তিত হয়, তবে এটি navবারটিকে কিছুটা প্রভাবিত করে না ; এটি যেখানে থাকে সেখানেই থাকে। আমার কি স্টিকিকে "পুনর্বহাল" করা দরকার, এবং যদি তা হয় তবে কীভাবে?
2. ডক্স উল্লেখ:

জাভাস্ক্রিপ্টের সাহায্যে বিকল্পগুলি নির্ধারণের সাথে কোনও বস্তুটি কনস্ট্রাক্টর ফাংশনে পাস করা জড়িত:

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

এর অর্থ কি আমি ইতিমধ্যে বিদ্যমান প্লাগইন দৃষ্টান্তে নতুন প্যারামিটারগুলি পাস করতে পারি ? যখনই আমি আমার বিকল্পগুলিতে অ্যারে প্যারামিটার হিসাবে আমার বিচ্ছিন্ন বিটিএমআঙ্করFoundation.Sticky ছাড়া আর কিছুই না দিয়ে নতুন কিছু পাস করেছি , কিছুই ঘটেনি।jQuery('#sticky_header')

3. ডক্স এছাড়াও প্রোগ্রামেটিক্যালি উত্থাপন করা আমার "sticky_header" করার স্টিকি যোগ। যদি এটি কাজ করে, আমি সরাসরি jQuery অবজেক্টটি পরিবর্তন করার চেষ্টা করতে পারি। এখনও অবধি আমি সফলভাবে দ্বারা আমার শিরোনামে স্টিকি প্লাগইনটি বাঁধতে সক্ষম হয়েছি:

   1. .js নিক্ষেপ করা হচ্ছে যা থেকে বোতামটি তার ফাংশনটিতে প্রবেশ করে assets/js/scripts(এবং তারপরে চলমান gulp)
   2. আমার থেকে সমস্ত ডেটা-স্টিকি ট্যাগ মুছে ফেলা হচ্ছে <header class="header">, সুতরাং যখন ডিওএম লোডিং শেষ করে শিরোনামে কোনও স্টিকি প্লাগইন নিবন্ধিত নেই there's

   3. প্রোগ্রামক্রমে প্লাগইন যুক্ত:

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

   শিরোলেখ এখন ফায়ারব্যাগ অনুসারে "স্টিকি" ক্লাস অর্জন করবে। তবে এটি এখনও কাজ করে না - বরং এটি বিভ্রান্ত হয়: "শিরোলেখের স্থান" কিছুটা ধসে গেছে ফলে এটি divনীচে "সামগ্রী" কে সামান্য coveringেকে রেখেছে । আপনি কি জানেন, শিরোলেখ স্টিক করে না। এটা কি বাগ?

   মনে করুন এটি এখন "উজ্জ্বলভাবে" কাজ করবে, আমি কি তাত্ত্বিকভাবে ডিফারেন্সিং var stickবা ব্যবহার করে বৈশিষ্ট্যগুলি পরিবর্তন করতে সক্ষম বা jQuery('#sticky_header')বা jQuery('.header')?

এই সর্বোপরি, jQuery এর মতো কাজ করে না। $আমার স্ক্রিপ্টগুলিতে ব্যবহার করতে আমার অনেক সমস্যা হয়েছে এবং উদাহরণস্বরূপ, destroy()স্টিকির পদ্ধতিটি আমি এটির কারণে চালাতে পারি না (এটি যদি কাজ করে তবে আমি স্টিকির একটি উদাহরণটিকে নতুন করে তৈরি করার জন্য নষ্ট করে দিতে পারি) btmAnchorএকটি নতুন স্ক্রলিং অবস্থানে সেট)। আমি এর জন্য আরও একটি প্রশ্ন খুলব।

Comments

অনুসন্ধান করার পরে, আসলে কোনও wp_enqueue_script () ফাংশন কল নেই যা স্পষ্টতই jQueryটিকে সাদৃশ্যযুক্ত করে, তাই এখন আমি সম্পদ / ফাংশন / এনকুই-স্ক্রিপ্টস.পিপি লিখে লিখেছি: wp_enqueue_script( 'jquery' ); দুর্ভাগ্যক্রমে এখনও আগের মতো একই সমস্যা। অথবা আমি jQuery ভুলভাবে সন্নিবেশিত করেছি? জোড়সডব্লিউপি এর নিজস্ব কিছু jQuery libs আছে?

— স্যামুয়েল এলএল হ্যাকসন

ওয়ার্ডপ্রেস স্বয়ংক্রিয়ভাবে jQuery সঞ্চারিত করে, এটি আপনার নিজের তৈরি করার দরকার নেই। এছাড়াও, "jQuery" সঠিক - তবে still এখনও কাজ করা উচিত। ওয়ার্ডপ্রেস কোনও দ্বন্দ্ব মোডে jQuery চালায়, এ কারণেই j এর পরিবর্তে "jQuery" ব্যবহৃত হয় $

— জেরেমি

সুতরাং তার মানে কি "Qu" এর পরিবর্তে "jQuery" লেখা এটির পছন্দসই উপায় এবং এটি একইভাবে কাজ করা উচিত? (আমি জিক্যুয়রিতে

— স্যামুয়েল এলএল হ্যাকসন

@ সামুয়েললোলহ্যাকসন, আপনি ওয়ার্ডপ্রেসে "$" ব্যবহার করতে পারেন, তবে, আপনাকে অবশ্যই এটির মতো জিকুয়েরি নির্দিষ্ট করতে হবে: var $ = jQueryবা এটি কল করার সময় পাস করতে হবে (প্রস্তুতি পদ্ধতি):jQuery(document).ready(function($){ //your code here with using $ or jQuery });

— নিকোলা কিরিনিক

আমি খুব অবাক হয়েছি, আমার একটি প্রশ্ন ছিল এবং উত্তর দেওয়ার জন্য 500 অনুগ্রহ ছেড়ে চলেছি এবং সত্য এবং সম্পূর্ণ উত্তরে পৌঁছাচ্ছি, এই প্রশ্নটি 2 বছর আগের জন্য এবং এর কোনও অনুগ্রহ নেই। আপনার ধরনের জন্য ধন্যবাদ।

— আমেরেলিকাএ

Answer 1

আপনি কেবল আপনার এসএসএসে স্টিকি সিএসএস অ্যাট্রিবিউট ব্যবহার করতে পারেন।

এইচটিএমএল বা পিএইচপিতে আপনার উপাদানগুলিতে ক্লাস যুক্ত করুন:

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

এবং এসএসএস বা সিএসএসে:

.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'
    });

});

ওয়েপপয়েন্টস প্লাগইন ব্যবহার করে আপনি যখন কোনও উপাদান বা বিভাগের বাইরে স্ক্রোল করবেন তখন আপনি সহজেই স্টিকি ক্লাস যুক্ত করতে পারেন। জকিউরি সিলেক্টর # এবং ব্যবহার করে আইডি এবং শ্রেণি দ্বারা নির্বাচন করতে পারেন। যথাক্রমে

Answer 3

আপনি যদি ওয়ার্ডপ্রেস ব্যবহার করেন, এটি স্বয়ংক্রিয়ভাবে JQueryটিকে সজ্জিত করে।

আপনার ওয়ার্ডপ্রেসে JQuery ব্যবহারের দুটি উপায় রয়েছে।

পরিবর্তে JQuery ব্যবহার করুন $

ওয়ার্ডপ্রেস তার বিবাদবিরোধী মোডে জ্যাকুয়ারি চালায় যাতে আপনার পরিবর্তে Jquery ব্যবহার করতে হবে $

আপনার ক্ষেত্রে

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

ভেরিয়েবলের মতো Use ব্যবহার করুন

আপনি ব্যবহার করতে পারেন $ তবে আপনাকে এইরকম ভেরিয়েবল সংজ্ঞা দিতে হবে:

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