द्रव ट्विटर बूटस्ट्रैप 2.0 में फिक्स्ड साइडबार नेविगेशन

Question 1

क्या साइडबार नेविगेशन को हमेशा तरल लेआउट में स्क्रॉल पर स्थिर रखना संभव है?

Question 2

नोट: एक बूटस्ट्रैप jQuery प्लगइन है जो ऐसा करता है और इतना अधिक है कि इस उत्तर (लगभग दो साल पहले) Affix लिखा जाने के बाद कुछ संस्करणों को पेश किया गया था । यह उत्तर केवल तभी लागू होता है जब आप बूटस्ट्रैप 2.0.4 या उससे कम का उपयोग कर रहे हों।

हां, बस अपने साइडबार के लिए एक नया निश्चित वर्ग बनाएं और बाएं मार्जिन के लिए अपनी सामग्री div में ऑफ़सेट क्लास जोड़ें, जैसे:

सीएसएस

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

डेमो: http://jsfiddle.net/U8HGz/1/show/ यहाँ संपादित करें: http://jsfiddle.net/U8HGz/1/

अपडेट करें

उत्तरदायी बूटस्ट्रैप शीट का समर्थन करने के लिए मेरा डेमो फिक्स्ड, अब यह बूटस्ट्रैप की उत्तरदायी सुविधा के साथ बहता है।

नोट: यह डेमो टॉप फिक्स्ड नेवबार के साथ बहता है, इसलिए position:staticस्क्रीन एलिमेंट पर दोनों तत्व बन जाते हैं , मैंने नीचे एक और डेमो रखा जो मोबाइल साइड स्क्रीन के देखने के लिए स्क्रीन को छोड़ने तक निश्चित साइडबार को बनाए रखता है।

सीएसएस

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

एचटीएमएल

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

डेमो , यहाँ संपादित करें ।

^{मामूली टिप्पणी: निश्चित साइडबार की चौड़ाई पर लगभग 10px / 1% का अंतर है, इसकी वजह यह है कि चूंकि यह स्पैन 3 कंटेनर डिव से चौड़ाई नहीं लेती है क्योंकि यह तय है कि मुझे एक के साथ आना था चौड़ाई। यह काफी करीब है।}

और यहाँ एक और तरीका है यदि आप साइडबार को तब तक नियत रखना चाहते हैं जब तक कि ग्रिड छोटी स्क्रीन / मोबाइल दृश्य के लिए गिर न जाए।

सीएसएस

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

डेमो , यहाँ संपादित करें ।

Question 3

नवीनतम Boostrap (2.1.0) में एक नया JS "affix" फीचर है जो विशेष रूप से इस प्रकार के एप्लिकेशन FYI के लिए है।

Question 4

यह उत्तरदायी Webdesign को खराब कर देगा। बेहतर साइडबार को मीडिया क्वेरी में लपेटें।

सीएसएस

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

एचटीएमएल

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

अब साइडबार केवल तय किया गया है, अगर व्यूपोट बड़ा है तो 768px।

Question 5

यह जावास्क्रिप्ट के बिना संभव नहीं है। मुझे affix.js बहुत जटिल लगते हैं, इसलिए मैं इसका उपयोग करता हूं:

stickyfloat

Question 6

मैंने एंड्रेस के उत्तरों के साथ शुरुआत की और इस तरह एक चिपचिपा साइडबार प्राप्त किया:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

सीएसएस:

.sidebar-nav-fixed {
  position:fixed;
}

जे एस / jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

मैं मान रहा हूं कि व्यूपोर्ट के आकार बदलने पर मुझे 'साइडबारवर्क' वेरिएबल को अपडेट करने के लिए JS की भी आवश्यकता है।

Question 7

फिक्स नौसेना या सब कुछ जो आप चाहते हैं, उसे प्राप्त करना बहुत आसान है। बस आपको अपने फिक्स टैग को इस तरह लिखना है, और इसे अपने बॉडी सेक्शन में डालना है

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Question 8

वर्तमान बूटस्ट्रैप संस्करण (3.3.2) के साथ नेविगेशन के लिए एक निश्चित साइडबार प्राप्त करने का एक अच्छा तरीका है।

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

आम तौर पर आपको निश्चित चौड़ाई और मार्जिन का उपयोग करने की आवश्यकता होगी या नेविगेशन सामग्री को ओवरलैप करेगा, लेकिन खाली प्लेसहोल्डर कॉलम की मदद से सामग्री हमेशा सही जगह पर तैनात होती है।

जब आप विंडो को 768px से कम करते हैं और निश्चित नेविगेशन जारी करते हैं, तो नीचे दिया गया सेटअप सामग्री को चारों ओर से लपेटता है।

कार्यशील उदाहरण के लिए http://www.bootply.com/ePvnTy1VII देखें ।

सीएसएस

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

एचटीएमएल

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>