ट्विटर के बूटस्ट्रैप 2.1.0 में नए एफिक्स प्लगइन का उपयोग कैसे करें?

Question

उस विषय पर बूटस्ट्रैप प्रलेखन मेरे लिए थोड़ा भ्रमित करने वाला है। मैं इस तरह का व्यवहार करना चाहता हूं जैसे डॉक्स में affix navbar के साथ: navbar एक पैराग्राफ / पेज हेडिंग के नीचे है, और नीचे स्क्रॉल करने पर इसे पेज के शीर्ष तक पहुंचने तक पहले स्क्रॉल करना चाहिए, और फिर आगे scrollds के लिए तय छड़ी ।

जैसा कि jsField नेवबार कॉन्सेप्ट के साथ काम नहीं करता है, मैंने एक न्यूनतम उदाहरण के रूप में उपयोग के लिए एक अलग पेज सेट किया है: http://i08fs1.ira.uka.de/~s_drr/navbar.html

मैं इसे अपने नावबार के रूप में उपयोग करता हूं:

<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a> 
                This is my navbar.
             </div>
        </div> <!-- container -->
    </div> <!-- navbar-inner -->
</div> <!-- navbar -->

मुझे लगता है कि मैं data-offset-topमूल्य 0 का होना चाहता हूं (चूंकि बार को "बहुत ऊपर" छड़ी करना चाहिए "लेकिन 50 के साथ कम से कम कुछ प्रभाव उपलब्ध है।"

यदि जगह में जावास्क्रिप्ट कोड भी रखा है:

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

किसी भी मदद की सराहना की।

Comments

क्या आप अपने पृष्ठ के मुख्य नौ-बार पर एफिक्स () का उपयोग करने का प्रयास कर रहे हैं?

— नितिन इमैनुएल

@NithinEmmanuel हाँ, पोस्ट में या नमूने में जावास्क्रिप्ट देखें: i08fs1.ira.uka.de/~s_drr/navbar.html

— डायनॉलॉन

आप .navbar-fixed-topaffix () का उपयोग करने के बजाय उपयोग क्यों नहीं करते ?

— नितिन इमैनुएल

@NithinEmmanuel क्योंकि मैं क्या चाहता हूँ नहीं है। .navbar-fixed-topनवबार को हर समय शीर्ष पर रखेगा । मैं एक पृष्ठ शीर्ष लेख चाहता हूँ, और जब स्क्रॉल नीचे (और इस प्रकार नेवर स्क्रॉल किया जाएगा) तो यह शीर्ष पर - तब और केवल तब तक चिपका रहना चाहिए। बूटस्ट्रैप डॉक्स ने अपने पिछले डॉक्स में सब्नव के रूप में बहुत ही तंत्र का इस्तेमाल किया, दुख की बात है कि उन्होंने इसे 2.1.0 डॉक्स के लिए हटा दिया है।

— डायनाटन

एक के लिए आपके जावास्क्रिप्ट का नेस्टिंग गलत है। )};होना चाहिए});

— Owen

Answer 1

मुझे एक समान समस्या हो रही थी, और मुझे विश्वास है कि मुझे एक बेहतर समाधान मिला।

data-offset-topअपने HTML में निर्दिष्ट करके परेशान न करें। इसके बजाय, यह निर्दिष्ट करें जब आप फोन करते हैं .affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

यहां लाभ यह है कि आप data-offset-topविशेषता को अपडेट करने की आवश्यकता के बिना अपनी साइट के लेआउट को बदल सकते हैं । चूंकि यह तत्व की वास्तविक गणना स्थिति का उपयोग करता है, इसलिए यह उन ब्राउज़रों के साथ विसंगतियों को भी रोकता है जो तत्व को थोड़ा अलग स्थान पर प्रस्तुत करते हैं।

---

आपको अभी भी सीएसएस के साथ तत्व को शीर्ष पर दबाना होगा। इसके अलावा, मुझे किसी कारण से दुर्व्यवहार वाले तत्वों के width: 100%बाद से नौसेना तत्व पर सेट करना पड़ा :.navposition: fixed

#nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

---

एक अंतिम बात: जब एक प्रत्यय तत्व तय हो जाता है, तो इसका तत्व पृष्ठ पर जगह नहीं लेता है, जिसके परिणामस्वरूप इसके नीचे के तत्व "कूद" जाते हैं। इस कुरूपता को रोकने के लिए, मैं नौबहार को लपेटता हूं divजिसकी ऊंचाई पर मैं रनवे पर नावबार के बराबर खड़ा होता हूं:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

।

$('#nav-wrapper').height($("#nav").height());

---

यहां एक्शन में इसे देखने के लिए अनिवार्य jsFiddle है ।

Comments

"कूद" को हटाने के लिए शानदार टिप - इस तथ्य को पूरी तरह से अनदेखा कर दिया कि यह आइटम हटा दिया गया और सोचा कि मेरा मुद्दा मेरे कोड के एफिक्स / जेएस भाग में निहित था।

— थॉमस

यह उत्तर सबसे अच्छा है! हर चीज़ वैसे ही काम कर रही है जैसी उसे करनी चाहिए। 'जंप' वाला हिस्सा सबसे अधिक ट्यूटोरियल में पाया गया था जो मुझे मिला था। धन्यवाद!

— रिकार्डो ओटेरो

एक महत्वपूर्ण सुधार: अपने पहले कोड स्निपेट में अपने jquery कोड में स्थिति () के बजाय ऑफसेट () का उपयोग करें। स्पष्टीकरण: स्थिति () फ़ंक्शन आपको मूल तत्व के भीतर ऑफसेट देता है, लेकिन ऑफसेट () दस्तावेज़ के भीतर इसकी स्थिति है, जो कि आप वास्तव में चाहते हैं (हाँ, नाम काउंटर-सहज हैं)। यदि आपका affix तत्व किसी अन्य तत्व के अंदर है तो आपका कोड काम नहीं करेगा। आपको केवल "शीर्ष" मान को इस तरह पास करना चाहिए: $ ("# नौसेना")। प्रत्यय ({ऑफसेट: {शीर्ष: $ ('# नौसेना')। ऑफसेट () शीर्ष। और यह एक तैयार के अंदर होना चाहिए। () ब्लॉक करें ताकि आपको पता

— चले

धन्यवाद @ जोर - मेरे जवाब और बेला अद्यतन!

— namuol

अच्छा! पूरी तरह से काम करता है और यह बहुत चिकनी है। वैसे, मैं एक चिपचिपा पाद लेख के साथ एक ही उदाहरण के लिए देख रहा हूँ। यदि आप जानते हैं कि ऐसा कैसे किया जाए, तो क्या आप jsFiddle को अपडेट कर सकते हैं? धन्यवाद!

— Jocelyn

Answer 2

बस इसे पहली बार लागू किया गया है, और यहाँ मैंने जो पाया है।

data-offset-topमूल्य पिक्सल है कि आप जगह लेने के लिए affixing प्रभाव के लिए क्रम में स्क्रॉल करना होगा की राशि है। आपके मामले में, एक बार 50pxस्क्रॉल किए जाने के बाद, आपके आइटम पर मौजूद क्लास को से बदल दिया जाता .affix-topहै .affix। आप शायद सेट करना चाहते हैं data-offset-topके बारे में करने के लिए 130pxआपके उपयोग के मामले में।

एक बार जब यह वर्ग परिवर्तन होता है, तो आपको कक्षा के लिए स्थिति को स्टाइल करके अपने तत्व को सीएसएस में रखना चाहिए .affix। बूटस्ट्रैप 2.1 पहले से ही परिभाषित करता है .affix, position: fixed;इसलिए आपको केवल अपनी स्थिति के मूल्यों को जोड़ना होगा।

उदाहरण:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}

Comments

Thx, कि कुछ हद तक काम करता है। मैंने अपना उदाहरण पृष्ठ उस पर अपडेट कर दिया है। अब समस्या यह है कि जैसे ही नौसिखिया को "एफिक्स" मिलता है सीएसएस क्लास के रूप में, नेवबर सीएसएस क्लास को छोड़ दिया जाता है। लेकिन मुझे लगता है कि बूटस्ट्रैप से सिर्फ एक बग / कमी है। इसे कम करने और बूटस्ट्रैप के पुनर्निर्माण के बिना बदलना आसान नहीं होगा।

— डायनाटन

यह मुझे दिखता है क्योंकि .navbarकक्षा संरक्षित है - क्या आप सुनिश्चित हैं?

— डेव चुंबन

इस उत्तर के लिए धन्यवाद, मैंने यह पता लगाने की कोशिश में उम्र बिताई

— रूबेन

थोड़ा बेहतर, अधिक सामान्य समाधान के लिए मेरा जवाब देखें ।

— नामुलोल

Answer 3

इस समस्या को ठीक करने के लिए मैंने एक jQuery इवेंट को निकालने के लिए affix प्लगइन को संशोधित किया है जब कोई ऑब्जेक्ट चिपका या अप्रभावित है।

यहाँ पुल अनुरोध है: https://github.com/twitter/bootstrap/pull/4712

और कोड: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

और फिर ऐसा करने के लिए नावबार संलग्न करें:

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>

Answer 4

आपको .affix()अपनी स्क्रिप्ट से हटाने की आवश्यकता है ।

बूटस्ट्रैप data-attributesज्यादातर समय जावास्क्रिप्ट के माध्यम से या सीधे चीजों को पूरा करने का विकल्प देता है ।

Answer 5

मैं इसे twitterbootstrap के स्रोत कोड से प्राप्त किया है और यह बहुत अच्छा काम कर रहा है:

HTML:

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

सीएसएस:

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

जे एस:

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});

Answer 6

बस आपको स्क्रिप्ट हटाने की जरूरत है। यहाँ मेरा उदाहरण है:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>

Answer 7

धन्यवाद namuol और समाधान के लिए डेव चुंबन करने के लिए। मेरे मामले में मुझे नौसिखिए ऊंचाई और चौड़ाई के साथ एक छोटी सी समस्या थी जब मैंने एक साथ एफ्लिक्स और पतन प्लगइन्स का उपयोग किया था। चौड़ाई के साथ समस्या को मूल तत्व (मेरे मामले में कंटेनर) से विरासत में आसानी से हल किया जा सकता है। इसके अलावा, मैं इसे जावास्क्रिप्ट (कॉफ़ीस्क्रिप्ट वास्तव में) के एक बिट के साथ आसानी से ढहने का प्रबंधन कर सकता था। autoटॉगल होने से पहले रैपर की ऊंचाई तय करने के लिए चाल है और इसे बाद में ठीक करें।

मार्कअप (एचएमएल):

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

सीएसएस:

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

Coffeescript:

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()

Answer 8

मेरा समाधान नावबार संलग्न करने के लिए:

function affixnolag(){

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function(){      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        })
        .on('unaffixed', function(){
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        });
 }

Answer 9

स्वीकृत उत्तर के समान, आप एक बार में सब कुछ करने के लिए निम्न की तरह भी कुछ कर सकते हैं:

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

यह न केवल affixप्लगइन को आमंत्रित करता है , बल्कि एक डिव में चिपका हुआ तत्व भी लपेटेगा जो कि नेवबार की मूल ऊंचाई को मुख्य करेगा।