আমি কীভাবে বুটস্ট্র্যাপে স্ক্রোলএসপির জন্য অফসেট সেট করব?

Question 1

আমার শীর্ষস্থানীয় উপরে নেভবার এবং মূল সামগ্রীর ক্ষেত্রের নীচে 3 ডিভের সাথে একটি সাইট রয়েছে have

আমি বুটস্ট্র্যাপ ফ্রেমওয়ার্ক থেকে স্ক্রোলস্পি ব্যবহার করার চেষ্টা করছি।

আপনি ডিভগুলি পেরিয়ে যাওয়ার সময় মেনুতে এটি বিভিন্ন শিরোনামটি সাফল্যের সাথে তুলে ধরেছি।

আমার কাছে এটিও রয়েছে তাই যখন আপনি মেনুটি ক্লিক করেন, এটি পৃষ্ঠার সঠিক অংশে স্ক্রোল করবে। যাইহোক, অফসেটটি ভুল (এটি নববারকে বিবেচনায় নিচ্ছে না, সুতরাং আমার প্রায় 40 পিক্সেল দ্বারা অফসেট করা দরকার)

আমি বুটস্ট্র্যাপ পৃষ্ঠায় দেখছি এটিতে একটি অফসেট বিকল্পের উল্লেখ রয়েছে তবে কীভাবে এটি ব্যবহার করবেন তা নিশ্চিত নই।

আপনি যখন স্ক্রোলস্পি ব্যবহার করতে পারবেন তখন এটির অর্থ কী তা $('#navbar').scrollspy()আমিও নই, আমি নিশ্চিত নই কোথায় এটি অন্তর্ভুক্ত করব যাতে আমি করিনি এবং সমস্ত কিছুই (অফসেট ব্যতীত) কাজ করছে বলে মনে হচ্ছে।

আমি ভেবেছিলাম অফসেটটি data-offset='10'বডি ট্যাগে থাকতে পারে তবে এটি আমার জন্য কিছু করে না।

আমার অনুভূতি আছে যে এটি সত্যিই সুস্পষ্ট কিছু এবং আমি কেবল এটি মিস করছি। কোন সাহায্য?

আমার কোড

...
<!-- note: the data-offset doesn't do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
    <a class="brand" href="#">VIPS</a>
    <ul class="nav">
        <li class="active">
             <a href="#trafficContainer">Traffic</a>
        </li>
        <li class="">
        <a href="#responseContainer">Response Times</a>
        </li>
        <li class="">
        <a href="#cpuContainer">CPU</a>
        </li>
      </ul>
    </div>
</div>
</div>
<div class="container">
<div class="row">
    <div class="span12">
    <div id="trafficContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
<div class="row">
    <div class="span12">
    <div id="responseContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
<div class="row">
    <div class="span12">
    <div id="cpuContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
</div>

...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>

Question 2

বুটস্ট্র্যাপ কেবল গুপ্তচরবৃত্তি নয়, গুপ্তচরবৃত্তি সমাধানের জন্য অফসেট ব্যবহার করে। এর অর্থ হ'ল যথাযথ স্থানে স্ক্রোল করা আপনার।

এটি ব্যবহার করে দেখুন, এটি আমার পক্ষে কাজ করে: নেভিগেশন ক্লিকের জন্য ইভেন্ট হ্যান্ডলার যুক্ত করুন।

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

আমি এটি এখানে পেয়েছি: https://github.com/twitter/bootstrap/issues/3316

Question 3

টিমটি ইঙ্গিত হিসাবে কৌশলটি প্যাডিংয়ের সুবিধা গ্রহণ করা। সুতরাং সমস্যাটি হল, আপনার ব্রাউজারটি সর্বদা আপনার অ্যাঙ্করটিকে উইন্ডোটির ঠিক শীর্ষে স্ক্রোল করতে চায়। যদি আপনি আপনার নোঙ্গরটি সেট করেন যেখানে আপনার পাঠ্যটি আসলে শুরু হয়, এটি আপনার মেনু বার দ্বারা অন্তর্ভুক্ত হবে। পরিবর্তে, আপনি যা করেন তা আপনার অ্যাঙ্করটি ধারক <section>বা <div>ট্যাগের আইডিতে সেট করা হয় , যা এনএভি / নাবারটি স্বয়ংক্রিয়ভাবে ব্যবহার করবে। তারপরে আপনার padding-topধারক হিসাবে আপনার পছন্দসই অফসেটের পরিমাণটি এবং margin-topধারকের বিপরীতে ধারকটির জন্য সেট করতে হবে padding-top। এখন আপনার ধারকটির ব্লক এবং অ্যাঙ্করটি পৃষ্ঠার একেবারে শীর্ষে শুরু হবে, তবে মেনু বারের নীচে না হওয়া পর্যন্ত ভিতরে থাকা সামগ্রী শুরু হয় না।

আপনি যদি নিয়মিত নোঙ্গর ব্যবহার করেন তবে উপরের মত আপনার ধারকটিতে নেতিবাচক মার্জিন-টপ ব্যবহার করে আপনি একই জিনিসটি সম্পন্ন করতে পারবেন তবে কোনও প্যাডিং নেই। তারপরে আপনি <a target="...">ধারকটির প্রথম সন্তান হিসাবে নিয়মিত অ্যাঙ্কর রেখেছিলেন । তারপরে আপনি দ্বিতীয় সন্তানের উপাদানটি একটি বিপরীত তবে সমান margin-top, তবে নির্বাচক ব্যবহার করে স্টাইল করুন .container:first-child +।

এটি সমস্ত অনুমান করে যে আপনার <body>ট্যাগটির শিরোনামটি ইতিমধ্যে আপনার শিরোনামের নীচে শুরু হয়ে গেছে, যা সাধারণ (

কর্মক্ষেত্রে এর উদাহরণ এখানে Here কোনও আইডি সহ আপনার পৃষ্ঠার যে কোনও কিছুতে আপনার URL টির শেষে # টি-এলিমেন্ট-আইডি টেপ করে লিঙ্ক করা যেতে পারে। যদি আপনি সমস্ত এইচ ট্যাগগুলি আইডি লিঙ্ক-সক্ষম ( যেমন গিথুব করেন ) এর সাথে কোনও ধরণের স্ক্রিপ্ট দিয়ে বিজ্ঞাপন ডিটি ট্যাগ করে থাকেন যা তাদের বামদিকে সামান্য লিঙ্কটি সংযুক্ত করে ; আপনার সিএসএসে নিম্নলিখিতগুলি যুক্ত করা আপনার জন্য নেভ-বার অফসেটের যত্ন নেবে:

body {
    margin-top: 40px;/* make room for the nav bar */
}

/* make room for the nav bar */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
dt[id]{
    padding-top: 60px;
    margin-top: -40px;
}

Question 4

আপনি এটি দিয়ে ফ্লাইতে স্ক্রোলস্পির অফসেটটি পরিবর্তন করতে পারেন (ধরে নিচ্ছেন আপনি শরীরের গুপ্তচরবৃত্তি ধরে নিচ্ছেন):

offsetValue = 40;
$('body').data().scrollspy.options.offset = offsetValue;
// force scrollspy to recalculate the offsets to your targets
$('body').data().scrollspy.process();

আপনার যদি অফসেট মান পরিবর্তনশীল প্রয়োজন হয় তবে এটিও কাজ করে। (পরের অংশটি যখন উইন্ডোটির প্রায় অর্ধেকটা উপরে থাকবে তখন আমি স্ক্রোলস্পিটি স্যুইচ করতে পছন্দ করি যাতে উইন্ডো পুনরায় আকার দেওয়ার সময় আমাকে অফসেটটি পরিবর্তন করতে হবে))

Question 5

আপনি যদি 10 এর অফসেট চান তবে এটি আপনার মাথায় রাখবেন:

<script>
  $('#navbar').scrollspy({
    offset: 10
  });
</script>

আপনার বডি ট্যাগটি দেখতে এমন হবে:

<body data-spy="scroll">

Question 6

বুটস্ট্র্যাপ ইস্যু থেকে # 3316 :

[এটি] শুধুমাত্র স্ক্রোলিং গণনা সংশোধন করার উদ্দেশ্যে - আমরা আসল অ্যাঙ্কর ক্লিকটি স্থানান্তর করি না

সুতরাং অফসেট সেটিং শুধুমাত্র প্রভাবিত যেখানে scrollspy মনে পৃষ্ঠায় স্ক্রল করা হয় । আপনি কোনও অ্যাঙ্কর ট্যাগ ক্লিক করার পরে এটি স্ক্রোলিংয়ের উপর প্রভাব ফেলবে না ।

একটি স্থির নববার ব্যবহারের অর্থ ব্রাউজারটি ভুল জায়গায় স্ক্রোল করছে। আপনি জাভাস্ক্রিপ্ট দিয়ে এটি ঠিক করতে পারেন:

var navOffset = $('.navbar').height();

$('.navbar li a').click(function(event) {
    var href = $(this).attr('href');

    // Don't let the browser scroll, but still update the current address
    // in the browser.
    event.preventDefault();
    window.location.hash = href;

    // Explicitly scroll to where the browser thinks the element
    // is, but apply the offset.
    $(href)[0].scrollIntoView();
    window.scrollBy(0, -navOffset);
});

তবে, স্ক্রোলস্পাইটি সঠিক বর্তমান উপাদানটি হাইলাইট করে তা নিশ্চিত করতে আপনার এখনও অফসেট সেট করতে হবে:

<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">

এখানে জেএসফিডেলে সম্পূর্ণ ডেমো রয়েছে ।

বিকল্পভাবে, আপনি আপনার অ্যাঙ্কর ট্যাগগুলিতে প্যাডিং করতে পারেন, সিএসএস কৌশল দ্বারা প্রস্তাবিত ।

a[id]:before { 
  display: block; 
  content: " ";
  // Use the browser inspector to find out the correct value here.
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

Question 7

আমি মনে করি যে অফসেটটি বিভাগের নীচের অবস্থানের সাথে কিছু করতে পারে।

আমি আমার সমস্যাটি ঠিক করেছি - আপনার হিসাবে একই - যোগ করে

  padding-top: 60px;

বুটস্ট্র্যাপ সিএসএস বিভাগের জন্য ঘোষণাপত্রে

আশা করি এইটি কাজ করবে!

Question 8

আমি .vspaceআমার প্রতিটি h1উপাদানের আগে অ্যাঙ্কর ধরে 40px উচ্চতার উপাদান যুক্ত করেছি ।

<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>

সিএসএসে:

.vspace { height: 40px;}

এটি দুর্দান্ত কাজ করছে এবং স্থানটি হৈচৈ করছে না।

Question 9

বুটস্ট্র্যাপ 4 (2019 আপডেট)

বাস্তবায়ন: স্থির ন্যাভ, স্ক্রোলস্পি এবং স্মুথ স্ক্রোলিং

এটি উপরের @ উইলফ্রেড-হিউজেস থেকে সমাধান, এটি প্রতিটি বিভাগের ট্যাগের আগে একটি অ-প্রদর্শিত ব্লককে পুনরায় চাপানোর জন্য সিএসএস ':: পূর্বে' ব্যবহার করে বুটস্ট্র্যাপ স্থির নববারের সাথে ওভারল্যাপ ইস্যুটি ঠিক করে দেয়। সুবিধা: আপনি আপনার বিভাগগুলির মধ্যে অপ্রয়োজনীয় প্যাডিংয়ের সাথে শেষ করবেন না। উদাহরণস্বরূপ, বিভাগ 3টি যথাযথভাবে বিভাগ 2 এর বিপরীতে অবস্থান করতে পারে এবং এটি এখনও ধারা 3 এর শীর্ষে সঠিক সঠিক অবস্থানে স্ক্রোল করবে।

পার্শ্ব দ্রষ্টব্য: স্ক্রিপ্টস্পাই অফসেটটিকে স্ক্রিপ্ট ট্যাগে সেট করার ফলে কিছুই ঘটেনি ($ ('# নভবার') sc অ্যানিমেশন।

index.html

<section id="section1" class="my-5">
...
<section id="section2" class="my-5">
...
<section id="section3" class="my-5">
...

পরে সূচি html ...

 <script>
      // Init Scrollspy
      $('body').scrollspy({ target: '#main-nav' });

      // Smooth Scrolling
      $('#main-nav a').on('click', function(event) {
        if (this.hash !== '') {
          event.preventDefault();

          const hash = this.hash;

          $('html, body').animate(
            {
              scrollTop: $(hash).offset().top
            },
            800,
            function() {
              window.location.hash = hash;
            }
          );
        }
      });
    </script>

স্টাইল। CSS:

// Solution to Fixed NavBar overlapping content of the section.  Apply to each navigable section.
// adjust the px values to your navbar height
// Source: https://github.com/twbs/bootstrap/issues/1768
#section1::before,
#section2::before,
#section3::before {
  display: block;
  content: ' ';
  margin-top: -105px;
  height: 105px;
  visibility: hidden;
}

body {
  padding-top: 105px;
}

ক্রেডিট: @ উপরে উইলফ্রেড-হিউজেস এবং ব্যবহারকারী @mnot থেকে মূল উৎস https://github.com/twbs/bootstrap/issues/1768

Question 10

আমার acjohnson55 এবং কার্ট ইউএক্সডি সমাধানগুলির সাথে সমস্যা ছিল। দুজনেই হ্যাশের লিঙ্কে ক্লিক করার জন্য কাজ করেছিল, তবে স্ক্রোলস্পির অফসেটটি এখনও সঠিক ছিল না।

আমি নিম্নলিখিত সমাধান নিয়ে এসেছি:

<div class="anchor-outer">
  <div id="anchor">
    <div class="anchor-inner">
      <!-- your content -->
    </div>
  </div>
</div>

এবং সম্পর্কিত সিএসএস:

body {
  padding-top:40px;
}

.anchor-outer {
  margin-top:-40px;
}

.anchor-inner {
  padding-top:40px;
}

@media (max-width: 979px) {
  body {
    padding-top:0px;
  }

  .anchor-outer {
    margin-top:0px;
  }

  .anchor-inner {
    padding-top:0px;
  }
}

@media (max-width: 767px) {
  body {
    padding-top:0px;
  }

  .anchor-outer {
    margin-top:0px;
  }

  .anchor-inner {
    padding-top:0px;
  }
}

আপনাকে আপনার নভবারের উচ্চতা এবং আপনার অ্যাঙ্কারের আইডি সহ 40px প্যাডিং / মার্জিন প্রতিস্থাপন করতে হবে।

এই সেটআপে আমি ডেটা-অফসেট বৈশিষ্ট্যের জন্য কোনও মান নির্ধারণের প্রভাব পর্যবেক্ষণ করতে পারি। যদি ডেটা-অফসেটের জন্য 100-200 এর কাছাকাছি বড় মানগুলি আরও প্রত্যাশিত আচরণের দিকে নিয়ে যায় (স্ক্রোলস্পাই- "স্যুইচ" ঘটবে যদি শিরোনামটি পর্দার মাঝখানে সার্কায় হয়)।

আমি আরও দেখতে পেলাম যে স্ক্রোলস্পি অনাবদ্ধ ডিভ ট্যাগগুলির মতো ত্রুটিগুলির জন্য খুব সংবেদনশীল (যা বেশ স্পষ্ট)), তাই http://omotator.w3.org/check এখানে আমার বন্ধু ছিল।

আমার মতে স্ক্রোলস্পি অ্যাঙ্কর আইডি বহনকারী পুরো বিভাগগুলির সাথে সবচেয়ে ভাল কাজ করে, যেহেতু নিয়মিত অ্যাঙ্কর উপাদানগুলি পিছনের দিকে স্ক্রোল করার সময় প্রত্যাশিত প্রভাবগুলিতে নেতৃত্ব দেয় না (স্ক্রোলস্পি- "সুইচ" অবশেষে আপনি অ্যাঙ্কর উপাদানটি আঘাত করার সাথে সাথে ঘটে, যেমন আপনার শিরোনাম, তবে সেই সময় আপনি ইতিমধ্যে সেই সামগ্রীটির উপরে স্ক্রোল করেছেন যা ব্যবহারকারী প্রত্যাশিত শিরোনামের সাথে সম্পর্কিত)

Question 11

আপনি যদি গুগলের মাধ্যমে এই প্রশ্নের (যেমন আমি করেছিলাম) হোঁচট খেয়ে পড়ে এবং তবুও স্ক্রোলস্পির অফসেটকে গতিশীলভাবে পরিবর্তন করার কোনও উপায় অনুসন্ধান করে। আমি এখন একটি সমাধানের লিঙ্কটি সংযুক্ত করছি যা আমার পক্ষে কাজ করেছিল।

এই পোস্টটি একবার দেখুন অন্য থ্রেডে । এতে আপনি প্রোগ্রামেটিকভাবে অফসেট মানটি কীভাবে পরিবর্তন করতে পারবেন এবং পরিবর্তনগুলি (যেমন নভবার আকারে পরিবর্তিত হয়) তে গতিশীল প্রতিক্রিয়া জানাতে পারেন তার একটি স্নিপেট রয়েছে।

আপনার সিএসএস ফিক্সগুলির সাথে আশেপাশে টিঙ্কার করার দরকার নেই, তবে বর্তমানে নির্দিষ্ট ইভেন্টগুলির নির্ভরতার জন্য আপনার প্রয়োজন অফসেটটি সেট করুন।

Question 12

আপনি খুলতে bootstap-offset.jsও পরিবর্তন করতে পারেন

$.fn.scrollspy.defaults = {
  offset: 10
}

সেখানে

Question 13

সবেমাত্র সেট করুন:

data-offset="200"

data-offsetডিফল্ট "50" হয় এবং এটি 10px এর সমতুল্য, সুতরাং কেবল বৃদ্ধি করুন data-offsetএবং আপনার সমস্যাটি সমাধান করা হবে।