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

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 ติด


JS ติด (affix.js)

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

ปลั๊กอินสลับพฤติกรรมนี้และปิด (เปลี่ยนค่าของตำแหน่ง CSS จากคงที่คงที่) ขึ้นอยู่กับการเลื่อนตำแหน่ง

ประทับปลั๊กอินสลับระหว่างสามชั้นเรียน: .affix , .affix-top และ .affix-bottom แต่ละชั้นเป็นตัวแทนของรัฐโดยเฉพาะ คุณต้องเพิ่มคุณสมบัติ CSS เพื่อจัดการกับตำแหน่งที่เกิดขึ้นจริงมีข้อยกเว้นของ position:fixed ใน .affix ระดับ

สำหรับข้อมูลเพิ่มเติมโปรดอ่านของเรา Bootstrap ติดกวดวิชา

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


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

เพิ่ม data-spy="affix" กับองค์ประกอบที่คุณต้องการในการสอดแนมในและ data-offset-top|bottom=" number " แอตทริบิวต์การคำนวณตำแหน่งของเลื่อน

ตัวอย่าง

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
ลองตัวเอง»

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

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

ตัวอย่าง

$('.nav').affix({offset: {top: 150} });
ลองตัวเอง»

ติดตัวเลือก

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

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ
offsetnumber | object | function10 ระบุจำนวนของพิกเซลเพื่อชดเชยจากหน้าจอเมื่อคำนวณตำแหน่งของเลื่อน เมื่อใช้หมายเลขเดียวชดเชยจะถูกเพิ่มในทั้งสองทิศทางบนและด้านล่าง ถ้าคุณเพียงต้องการที่จะควบคุมด้านบนหรือด้านล่างใช้วัตถุเช่น offset: {top:25}

สำหรับการชดเชยหลายรายการให้ใช้ offset: {top:25, bottom:50}

เคล็ดลับ: ใช้ฟังก์ชั่นแบบไดนามิกให้ชดเชย (จะมีประโยชน์สำหรับการออกแบบที่ตอบสนองต่อ)
targetselector | node | elementthe window object ระบุองค์ประกอบเป้าหมายของการแนบ

ติดเหตุการณ์

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

เหตุการณ์ ลักษณะ ลองมัน
affix.bs.affix เกิดขึ้นก่อนที่จะวางตำแหน่งคงที่จะถูกเพิ่มองค์ประกอบ (เช่นเมื่อ .affix-top ชั้นกำลังจะถูกแทนที่ด้วย .affix class) ลองมัน
affixed.bs.affix เกิดขึ้นหลังจากการวางตำแหน่งคงที่จะถูกเพิ่มองค์ประกอบ (เช่นหลังจากที่ .affix-top ชั้นจะถูกแทนที่ด้วย .affix class) ลองมัน
affix-top.bs.affix เกิดขึ้นก่อนที่จะมีองค์ประกอบด้านบนกลับไปยังตำแหน่งเดิม (ที่ไม่คงที่) (เช่น .affix ชั้นกำลังจะถูกแทนที่ด้วย .affix-top ) ลองมัน
affixed-top.bs.affix เกิดขึ้นหลังจากที่องค์ประกอบด้านบนกลับไปยังตำแหน่งเดิม (ที่ไม่คงที่) (เช่น .affix ชั้นได้ถูกแทนที่ด้วย .affix-top ) ลองมัน
affix-bottom.bs.affix เกิดขึ้นก่อนที่จะมีองค์ประกอบด้านล่างกลับไปยังตำแหน่งเดิม (ที่ไม่คงที่) (เช่น .affix ชั้นกำลังจะถูกแทนที่ด้วย .affix-bottom ) ลองมัน
affixed-bottom.bs.affix เกิดขึ้นหลังจากที่องค์ประกอบด้านล่างกลับไปที่เดิม (ที่ไม่คงที่) ตำแหน่ง (เช่น .affix ชั้นได้ถูกแทนที่ด้วย .affix-bottom ) ลองมัน

ตัวอย่าง

ตัวอย่าง

Navbar ติด

สร้างเมนูนำทางแนวนอนติดอยู่:

ตัวอย่าง

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
ลองตัวเอง»

ใช้ jQuery จะติดแถบนำทางโดยอัตโนมัติ

ใช้ของ jQuery outerHeight() วิธีการในการติด Navbar หลังจากที่ผู้ใช้มีการเลื่อนผ่านองค์ประกอบที่กำหนด (<header>) :

ตัวอย่าง

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
ลองตัวเอง»

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>
ลองตัวเอง»

Navbar เคลื่อนไหวบนประทับ

ใช้ CSS เพื่อจัดการที่แตกต่างกัน .affix ชั้นเรียน:

ตัวอย่าง - การเปลี่ยนสีพื้นหลังและช่องว่างของแถบนำทางบนเลื่อน

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color: #F44336;
    border-color: #F44336;
}

.affix a {
    color: #fff !important;
    padding: 15px !important;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top a {
    padding: 25px !important;
}
ลองตัวเอง»

เช่น - สไลด์ใน Navbar

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top {
    position: static;
    top: -35px;
}
ลองตัวเอง»