ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap JS Scrollspy


JS Scrollspy (scrollspy.js)

ปลั๊กอิน Scrollspy จะใช้ในการปรับปรุงการเชื่อมโยงในรายการนำทางบนพื้นฐานของการเลื่อนตำแหน่งโดยอัตโนมัติ

สำหรับการสอนเกี่ยวกับ Scrollspy อ่านของเรา Bootstrap Scrollspy กวดวิชา

เคล็ดลับ: ปลั๊กอิน Scrollspy มักจะใช้ร่วมกับการ ติด ปลั๊กอิน


ผ่าน data-* แอตทริบิวต์

เพิ่ม data-spy="scroll" องค์ประกอบที่ควรจะนำมาใช้เป็นพื้นที่เลื่อน (มักนี้เป็น <body> องค์ประกอบ)

แล้วเพิ่ม data-target แอตทริบิวต์ที่มีค่าของ ID หรือชื่อชั้นของแถบนำทาง ( .navbar ) นี้คือการทำให้แน่ใจว่า navbar จะเชื่อมต่อกับพื้นที่เลื่อน

โปรดทราบว่าองค์ประกอบเลื่อนต้องตรงกับรหัสของการเชื่อมโยงภายในรายการ Navbar ฯ ( <div id="section1"> ตรง <a href="#section1"> )

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

ต้องมีการวางตำแหน่งสัมพัทธ์: องค์ประกอบด้วย data-spy="scroll" ต้องใช้ CSS position ทรัพย์สินที่มีค่าของ "relative" ทำงานอย่างถูกต้อง

ตัวอย่าง

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>
ลองตัวเอง»

ผ่านทางจาวาสคริปต์

เปิดใช้งานด้วยตนเอง:

ตัวอย่าง

$('body').scrollspy({target: ".navbar"})
ลองตัวเอง»

ตัวเลือก Scrollspy

ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ข้อมูลชดเชย = ""

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ ลองมัน
offsetnumber10 ระบุจำนวนของพิกเซลเพื่อชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของเลื่อน ลองมัน

วิธี Scrollspy

ตารางต่อไปนี้ทุกวิธี scrollspy ใช้ได้

วิธี ลักษณะ ลองมัน
.scrollspy("refresh") เมื่อมีการเพิ่มและลบองค์ประกอบจาก scrollspy วิธีนี้สามารถนำมาใช้เพื่อฟื้นฟูเอกสาร ลองมัน

เหตุการณ์ Scrollspy

ตารางต่อไปนี้แสดงเหตุการณ์ scrollspy ที่มีอยู่ทั้งหมด

เหตุการณ์ ลักษณะ ลองมัน
activate.bs.scrollspy เกิดขึ้นเมื่อรายการใหม่จะเปิดใช้งานโดย scrollspy ลองมัน

ตัวอย่าง

ตัวอย่าง

Scrollspy กับเลื่อนภาพเคลื่อนไหว

วิธีการเพิ่มการเลื่อนหน้าเรียบสมอในหน้าเดียวกัน:

เลื่อนเรียบ

// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});

// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash (#)
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area (the speed of the animation)
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
});
ลองตัวเอง»

Scrollspy และติด

ใช้ ติด ปลั๊กอินร่วมกับปลั๊กอิน Scrollspy:

เมนูแนวนอน (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
ลองตัวเอง»

เมนูแนวตั้ง (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
ลองตัวเอง»