แก้ไขการนำทางแถบด้านข้างในของไหล twitter bootstrap 2.0

เป็นไปได้หรือไม่ที่จะทำให้การนำทางในแถบด้านข้างคงที่เสมอเมื่อเลื่อนในรูปแบบของเหลว

หมายเหตุ:มีบูตเป็น jQuery ปลั๊กอินที่ไม่นี้และอื่น ๆ อีกมากมายที่ถูกนำมาไม่กี่รุ่นหลังจากคำตอบนี้ถูกเขียน (เกือบสองปีที่ผ่านมา) เรียกว่าติด คำตอบนี้ใช้ได้เฉพาะเมื่อคุณใช้ Bootstrap 2.0.4 หรือต่ำกว่า

ใช่เพียงสร้างคลาสคงที่ใหม่สำหรับแถบด้านข้างของคุณและเพิ่มคลาสออฟเซ็ตให้กับ div เนื้อหาของคุณเพื่อสร้างขอบด้านซ้ายดังนี้:

CSS

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

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

Demo: http://jsfiddle.net/U8HGz/1/show/ แก้ไขที่นี่: http://jsfiddle.net/U8HGz/1/

อัปเดต

แก้ไขการสาธิตของฉันเพื่อรองรับแผ่น bootstrap ที่ตอบสนองตอนนี้มันไหลพร้อมกับคุณสมบัติตอบสนองของ bootstrap

หมายเหตุ: การสาธิตนี้ไหลไปพร้อมกับแถบนำทางคงที่ด้านบนดังนั้นองค์ประกอบทั้งสองจึงกลายเป็นposition:staticตามการปรับขนาดหน้าจอฉันจึงวางการสาธิตอื่นไว้ด้านล่างซึ่งจะรักษาแถบด้านข้างที่คงที่จนกว่าหน้าจอจะลดลงสำหรับมุมมองมือถือ

CSS

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

HTML

<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% เนื่องจากความจริงที่ว่าเนื่องจากไม่ได้รับความกว้างจาก div ของคอนเทนเนอร์ span3 เนื่องจากได้รับการแก้ไขแล้วฉันจึงต้องสร้าง ความกว้าง ก็ใกล้พอแล้ว}

และนี่เป็นอีกวิธีหนึ่งหากคุณต้องการให้แถบด้านข้างคงที่จนกว่าเส้นตารางจะลดลงสำหรับมุมมองหน้าจอขนาดเล็ก / มือถือ

CSS

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

สาธิตแก้ไขที่นี่

Boostrap ล่าสุด (2.1.0) มีคุณสมบัติ "affix" ใหม่สำหรับแอปพลิเคชันประเภทนี้โดยเฉพาะ FYI

สิ่งนี้จะทำให้ Webdesign ตอบสนองได้เร็วขึ้น ตัดแถบด้านข้างที่คงที่ในแบบสอบถามสื่อได้ดีขึ้น

CSS

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

HTML

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

ตอนนี้แถบด้านข้างได้รับการแก้ไขแล้วหากมุมมองใหญ่กว่า 768px

สิ่งนี้เป็นไปไม่ได้หากไม่มีจาวาสคริปต์ ฉันพบว่า affix.js ซับซ้อนเกินไปดังนั้นฉันจึงค่อนข้างใช้:

เหนียว

ฉันเริ่มต้นด้วยคำตอบของ Andres และได้รับแถบด้านข้างที่เหนียวเช่นนี้:

HTML:

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

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

CSS:

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

JS / jQuery:

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

ฉันสมมติว่าฉันต้องการ JS เพื่ออัปเดตตัวแปร 'sidebarwidth' เมื่อปรับขนาดวิวพอร์ต

ง่ายมากที่จะรับ fix nav หรือทุกแท็กที่คุณต้องการ สิ่งที่คุณต้องมีคือเขียนฟิกซ์แท็กของคุณแบบนี้และวางไว้ในส่วนเนื้อหาของคุณ

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

ด้วย Bootstrap เวอร์ชันปัจจุบัน (3.3.2) มีวิธีที่ดีในการทำให้แถบด้านข้างคงที่สำหรับการนำทาง

โซลูชันนี้ยังใช้งานได้ดีกับคลาส container-fluid ที่นำมาใช้ใหม่ซึ่งหมายความว่าจะมีเค้าโครงแบบเต็มหน้าจอที่ตอบสนองได้อย่างง่ายดาย

โดยปกติคุณจะต้องใช้ความกว้างและระยะขอบคงที่ไม่เช่นนั้นการนำทางจะทับซ้อนเนื้อหา แต่ด้วยความช่วยเหลือของคอลัมน์ตัวยึดที่ว่างเนื้อหาจะถูกจัดวางในตำแหน่งที่ถูกต้องเสมอ

การตั้งค่าด้านล่างจะรวมเนื้อหาไว้รอบ ๆ เมื่อคุณปรับขนาดหน้าต่างให้น้อยกว่า 768px และเผยแพร่การนำทางคงที่

ดูhttp://www.bootply.com/ePvnTy1VIIสำหรับตัวอย่างการทำงาน

CSS

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

HTML

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