मैं कैसे बूटस्ट्रैप में स्क्रॉलपीस के लिए ऑफसेट सेट कर सकता हूं?

98

मेरे पास एक साइट है जिसमें मुख्य सामग्री क्षेत्र में नीचे और ऊपर 3 डिवीजनों पर तय किए गए नावबार हैं।

मैं बूटस्ट्रैप फ्रेमवर्क से स्क्रैपी का उपयोग करने की कोशिश कर रहा हूं।

जब आप पिछले स्क्रॉल करते हैं तो मेरे पास मेनू में अलग-अलग हेडिंग को हाइलाइट करना होता है।

मेरे पास भी ऐसा है जब आप मेनू पर क्लिक करते हैं, तो यह पृष्ठ के दाहिने हिस्से पर स्क्रॉल करेगा। हालाँकि, ऑफसेट गलत है (यह नोटबार को ध्यान में नहीं ले रहा है, इसलिए मुझे लगभग 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>

twitter-bootstrap

— लांगो
स्रोत

आप एक स्थिति क्यों दे रहे हैं: आपके डीवाई के सापेक्ष? शायद यही कारण है। क्या आप अपने कोड के साथ jsfiddle बना सकते हैं ताकि हम कार्रवाई में देख सकें?

— पेरिक्लिस

113

बूटस्ट्रैप केवल जासूसी को हल करने के लिए ऑफसेट का उपयोग करता है, स्क्रॉलिंग नहीं। इसका मतलब है कि उचित स्थान पर स्क्रॉल करना आपके ऊपर है।

यह कोशिश करो, यह मेरे लिए काम करता है: नेविगेशन क्लिक के लिए एक घटना हैंडलर जोड़ें।

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

— कर्ट यूएक्सडी
स्रोत

3

जवाब के लिए धन्यवाद। मुझे यह महसूस करने में काफी समय लगा कि ऑफसेट स्क्रॉलिंग को प्रभावित नहीं करता है। इसका मतलब यह है कि किसी को भी इस तरह से मैन्युअल रूप से समायोजित करने के लिए एक निश्चित-शीर्ष आवश्यकताओं का उपयोग करना चाहिए।

— ब्रायन स्मिथ

8

URL के हैश अनुभाग को उचित रूप से अपडेट करने के लिए, window.location.hash = $(this).attr('href')इस फ़ंक्शन में जोड़ें ।

— स्टीफन एम। हैरिस

2

धन्यवाद! एफडब्ल्यूआईडब्ल्यू, डेटा-ऑफसेट को शरीर में डालना भी महत्वपूर्ण है, क्योंकि पूछने वाले का कहना है कि यह कुछ भी नहीं करता है, लेकिन यह उचित जासूसी के लिए आवश्यक है। इसका व्यापक उत्तर देने में मदद मिल सकती है।

— मैरोनी

4

डायनेमिक जीत: var navOffset = $('#navbar').height();औरscrollBy(0, -navOffset);

— एहनबिजद

78

टिम ने कहा कि चाल, पैडिंग का फायदा उठाना है। तो समस्या यह है, आपका ब्राउज़र हमेशा अपने एंकर को विंडो के बिल्कुल ऊपर स्क्रॉल करना चाहता है। यदि आप अपना लंगर सेट करते हैं, जहां आपका पाठ वास्तव में शुरू होता है, तो यह आपके मेनू बार द्वारा बंद कर दिया जाएगा। इसके बजाय, आप जो करते हैं वह आपके एंकर को कंटेनर <section>या <div>टैग की आईडी पर सेट कर देता है , जिसे नौसेना / नावबार स्वचालित रूप से उपयोग करेगा। फिर आपको अपने padding-topकंटेनर को उस राशि के लिए सेट करना होगा जो आप चाहते हैं, और इसके विपरीतmargin-top कंटेनर के लिए । अब आपके कंटेनर का ब्लॉक और एंकर पेज के ठीक शीर्ष पर शुरू होता है, लेकिन अंदर की सामग्री मेनू बार के नीचे तक शुरू नहीं होती है। padding-top

यदि आप नियमित एंकर का उपयोग कर रहे हैं, तो आप अपने कंटेनर में नकारात्मक मार्जिन-टॉप का उपयोग करके उसी चीज़ को पूरा कर सकते हैं, लेकिन कोई पैडिंग नहीं। फिर आप <a target="...">कंटेनर के पहले बच्चे के रूप में एक नियमित लंगर डालते हैं । फिर आप दूसरे बच्चे के तत्व को विपरीत लेकिन बराबर के साथ स्टाइल करते हैं margin-top, लेकिन चयनकर्ता का उपयोग करते हुए .container:first-child +।

यह सभी मानता है कि आपके <body>टैग में पहले से ही अपने हेडर के नीचे शुरू करने के लिए अपना मार्जिन सेट है, जो कि आदर्श है (अन्यथा पृष्ठ बल्ले से बंद पाठ के साथ प्रस्तुत करना होगा)।

इस क्रिया में इसका एक उदाहरण है। एक आईडी के साथ आपके पेज पर कुछ भी आपके URL के अंत में #-the-elements-id से संबंधित करके जोड़ा जा सकता है। अगर आप अपने सभी h टैग्स ऐड dt टैग्स को आईडी लिंक-सक्षम ( जैसे गितुब करते हैं ) के साथ किसी प्रकार की स्क्रिप्ट के साथ बनाते हैं जो उनमें से बाईं ओर थोड़ा लिंक इंजेक्ट करता है ; अपने सीएसएस में निम्नलिखित को जोड़ना आपके लिए नव-बार ऑफ़सेट का ध्यान रखेगा:

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;
}

— acjay
स्रोत

9

पेडिंग-टॉप, नेगेटिव मार्जिन-बॉटम (एक ही तत्व पर) कॉम्बो से प्यार करें। आसान तो js के साथ खिलवाड़।

— Eystein

सबसे अच्छा जवाब लगता है, लेकिन मैं थोड़ा खो गया हूं। एक उदाहरण का कोई भी मौका।

— eddyparkinson

@eddyparkinson, लगता है कि आपने इसे अभी समझ लिया है: उदाहरण, जब आपके पास बूटस्ट्रैप की पंक्तियों पर आपकी आईडी है: .row [आईडी] {गद्दी-शीर्ष: 60px; मार्जिन-टॉप: -40px; } इसे अपनी कम फ़ाइल में रखें: .row [id] {padding-top: 60px; मार्जिन-टॉप: -40px; }

— कलेज़

क्या बूटस्ट्रैप का डिफ़ॉल्ट ऑफ़सेट पैरामीटर इसके लिए नहीं है? यह शामिल करने के लिए इस तरह की एक स्पष्ट चीज की तरह है, और इस तरह से वर्कअराउंड का सहारा नहीं लेना है।

— अहान्सेकद २

क्या यह प्रभावी रूप से उस div पर अतिरिक्त स्थान जोड़ता है जिसे आप लक्षित कर रहे हैं? यदि आप ऐसा नहीं चाहते हैं तो क्या होगा? एक अदृश्य अतिरिक्त रिक्ति आदर्श होगी।

— अहानिबेकद २

10

आप इसे (शरीर पर जासूसी करते हुए मानते हुए) स्क्रॉल के ऑफसेट को मक्खी पर बदल सकते हैं:

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

यह भी काम करता है अगर आपको गतिशील रूप से ऑफसेट मूल्य को बदलने की आवश्यकता है। (जब अगले खंड के बारे में आधे रास्ते खिड़की है तो मैं स्विच करने के लिए स्क्रॉल करने के लिए पसंद है तो मैं खिड़की आकार बदलने के ऑफसेट की जरूरत है।)

— cogell
स्रोत

2

इसके लिए धन्यवाद - बूटस्ट्रैप 3.0 $ ('बॉडी') के लिए थोड़ा समायोजन के साथ बढ़िया काम करता है। डेटा () ['bs.scrollspy']। options.offset = newOffset; // नया ऑफ़सेट $ ('बॉडी') सेट करें। डेटा () ['bs.scrollspy']। प्रोसेस (); // फोर्स स्क्रैपी को अपने टारगेट $ ('बॉडी') को रिकॉल करने के लिए स्क्रॉल करें। स्क्रॉलस्पे ('रिफ्रेश'); // स्क्रॉलस्पी को रिफ्रेश करें।

— सैम

मैंने पाया है कि यह तरीका अच्छा है, लेकिन अगर मैं इसे अलग-अलग मेन्यू हाइट्स $ ('बॉडी') होने के कारण शुरुआत से ही ऑफसेट सेट करने के लिए उपयोग करना चाहता हूं। डेटा ()। scrollspy.options.offset (या संस्करण 3.0 के लिए संस्करण) अभी तक सेट नहीं किया गया है। वहाँ स्क्रॉल के बारे में कुछ अतुल्यकालिक है कि मैं याद कर रहा हूँ?

— नेस-ईई

बूटस्ट्रैप 3.1.1 के रूप में यह होना चाहिए $('body').data()['bs.scrollspy'].options.offset। पेज लोड पर स्क्रैपी को ट्रिगर करने के लिए उपयोगी हैwindow.scrollBy(X,Y)

— मेरेडिथ

8

यदि आप 10 की भरपाई चाहते हैं तो आप इसे अपने सिर में रख लेंगे:

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

आपका शरीर टैग इस तरह दिखेगा:

<body data-spy="scroll">

— डेविड नफीस
स्रोत

6

यह सामग्री को ऑफसेट नहीं करता है, यह नौसेना को बंद कर देता है।

— अंक

यह सही नौसेना तत्व को उजागर करने के लिए काम करेगा न कि उस स्थान पर जहां क्लिक लीड होता है (जो मूल पोस्टर प्रश्न है)। उस ने कहा, यह वही था जिसकी मुझे तलाश थी! धन्यवाद!

— वेलिन ०

6

से बूटस्ट्रैप मुद्दा # 3316 :

[यह] केवल स्क्रॉलिंग गणना को संशोधित करने का इरादा है - हम वास्तविक एंकर क्लिक को स्थानांतरित नहीं करते हैं

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

एक निश्चित नावबार का उपयोग करने का मतलब है कि ब्राउज़र गलत जगह पर स्क्रॉल कर रहा है। आप इसे जावास्क्रिप्ट के साथ ठीक कर सकते हैं:

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">

यहाँ JSFiddle पर एक पूर्ण डेमो है ।

वैकल्पिक रूप से, आप अपने एंकर टैग के लिए पैडिंग कर सकते हैं, जैसा कि सीएसएस ट्रिक्स द्वारा सुझाया गया है ।

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

— विल्फ्रेड ह्यूजेस
स्रोत

1

मुझे लगता है कि खंड के निचले स्थान के साथ ऑफसेट कुछ कर सकता है।

मैंने अपना मुद्दा तय कर लिया - आपके जैसे ही - को जोड़कर

  padding-top: 60px;

bootstrap.css में अनुभाग के लिए घोषणा में

उम्मीद है की वो मदद करदे!

— टिम
स्रोत

"खंड के लिए घोषणा" क्या है जहां आप इस कोड को डालते हैं?

— अहानजकदक

1

मैंने .vspaceअपने प्रत्येक तत्व से पहले एंकर को पकड़े हुए 40px-ऊँचाई वाला तत्व जोड़ा h1।

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

CSS में:

.vspace { height: 40px;}

यह बहुत अच्छा काम कर रहा है और अंतरिक्ष चौका नहीं रहा है।

— क्वेंटिन
स्रोत

1

बूटस्ट्रैप 4 (2019 अपडेट)

कार्यान्वयन: फिक्स्ड नव, स्क्रॉलपीस और स्मूथ स्क्रॉलिंग

यह ऊपर @ wilfred-hughes से समाधान है, यह बूटस्ट्रैप फिक्स्ड नेवबार के साथ ओवरलैप की समस्या को ठीक करता है सीएसएस '::' से पहले 'प्रत्येक सेक्शन टैग से पहले एक गैर-प्रदर्शित ब्लॉक को रोकने के लिए। लाभ: आप अपने अनुभागों के बीच अनावश्यक पैडिंग के साथ समाप्त नहीं होते हैं। उदाहरण के लिए, धारा 3 को धारा 2 के ठीक सामने लंबवत रखा जा सकता है और यह खंड 3 के शीर्ष पर अभी भी सही सही स्थिति पर स्क्रॉल करेगा।

साइड नोट: स्क्रिप्ट टैग में स्क्रैपी ऑफसेट को सेट करने से कुछ भी नहीं हुआ ($ ('# navbar')। स्क्रॉलस्पेस ({ऑफसेट: 105});) और एनीमेशन ब्लॉक में ऑफसेट को समायोजित करने के प्रयासों के बाद भी मिसलिग्न्मेंट पोस्ट हुआ। एनीमेशन।

index.html

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

बाद में index.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>

style.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;
}

क्रेडिट: @ wilfred-hughes ऊपर और मूल स्रोत से उपयोगकर्ता @mnot https://github.com/twbs/bootstrap/issues/1768 पर

— ObjectiveTC
स्रोत

1

धन्यवाद! उह मैं एक घंटे के लिए इस के साथ कुश्ती कर रहा हूँ, योग्य!

— नेक्सस

0

मुझे acjohnson55 और कर्ट UXD के समाधान के साथ समस्या थी। दोनों ने हैश के लिंक पर क्लिक करने के लिए काम किया, लेकिन स्क्रॉलपी ऑफसेट फिर भी सही नहीं था।

मैं निम्नलिखित समाधान के साथ आया:

<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://validator.w3.org/check यहाँ मेरा मित्र था।

मेरी राय में, स्क्रॉल आईडी लंगर आईडी ले जाने वाले पूरे वर्गों के साथ सबसे अच्छा काम करता है, क्योंकि नियमित एंकर तत्व पीछे की ओर स्क्रॉल करते समय अपेक्षित प्रभाव नहीं देते हैं (स्क्रॉलपीसी- "स्विच" अंततः एंकर तत्व को हिट करते ही होता है, जैसे आपकी हेडिंग, लेकिन उस समय आपने पहले ही उस सामग्री पर स्क्रॉल कर दिया है जो उपयोगकर्ता के अनुसार हेडिंग से संबंधित है)।

— schreon
स्रोत

0

यदि आप Google के माध्यम से इस प्रश्न (जैसे मैंने किया था) पर ठोकर खाई और अभी भी स्क्रॉलपी की ऑफसेट को गतिशील रूप से बदलने का एक तरीका खोज रहे हैं। मैं अब एक समाधान के लिए एक लिंक संलग्न कर रहा हूं जो मेरे लिए काम करता है।

इस पोस्ट पर एक नज़र डालिए जिसे मैंने दूसरे धागे में बनाया है । इसमें एक स्निपेट शामिल है कि कैसे आप प्रोग्रामेटिक रूप से ऑफ़सेट मान को बदल सकते हैं और परिवर्तनों पर गतिशील रूप से प्रतिक्रिया कर सकते हैं (जैसे कि अगर आकार में नावबार बदलता है)।

आपको सीएसएस फ़िक्स के साथ इधर-उधर छेड़छाड़ करने की ज़रूरत नहीं है, बल्कि कुछ घटनाओं की निर्भरता में वर्तमान में आपके द्वारा आवश्यक ऑफसेट सेट करें।

— एक्स
स्रोत

-1

आप इसे खोल bootstap-offset.jsऔर संशोधित भी कर सकते हैं

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

वहाँ।

— एडोब
स्रोत

1

स्क्रॉलपी ऑफसेट सामग्री को ऑफसेट नहीं करता है, यह नौसेना को बंद कर देता है।

— अंक

-1

बस सेट:

data-offset="200"

data-offsetडिफ़ॉल्ट रूप से "50" है और यह 10px के बराबर है, इसलिए बस वृद्धि करें data-offsetऔर आपकी समस्या हल हो गई है।

— Zivanic
स्रोत