ตอบกระทู้
-
ผู้เขียนข้อความ
-
Laxe
Participantขอบคุณครับ เดี๋ยวนำไปปรับแก้ไขกับเว็บ
Laxe
Participantขอบคุณครับ
Laxe
Participantผมใช้ javascript jQuery กับ scss เข้าช่วยคับ
javascript ใช้ตอน check ตำแหน่ง scroll page page ลงมาตำแหน่งที่เรากำหนดไว้ก็ให้ เรียกใช้ class ที่เรากำหนดไว้ ในที่นี้
กำหนด code javascript
ประมาณว่า ถ้า page scroll ลงมามากว่า element id (#masthead) เป็น block header เมนูของ seed theme ก็ให้เพิ่ม class ที่ชื่อว่า -sticky เข้าไปที่ id mastheadส่วน class -sticky ผมก็กำหนดให้มีการเปลี่ยนสีพื้นหลังใหม่ และกำหนด position เป็นแบบ fixed (ให้ fix ตำแหน่งอยู่ด้านบนสุด และเลื่อนตาม)
ประมาณนี้ มั่วๆ ลองๆ เดาเองคับตัวอย่าง scss code ที่เพิ่มเข้าไป
.-sticky{
position: fixed;
top: 0px;
background-color: rgba($color: #b89462, $alpha: 1.0);// ใน element id (#masthead) จะมี class s-container มี background-color อยู่ ผมก็ทำให้เป็น พื้นใสโดยกำหนดเป็น transparent คับ
.s-container{
background-color: transparent;
}
}ตัวอย่าง javascript check ตำแหน่งที่จะเปลี่ยนใช้งาน class หรือไม่ใช้ class คับ
$(window).on(“scroll”, function () {
if ($(window).scrollTop() > $(“#masthead”).height()) {
$(“#masthead”).addClass(“-sticky”);
} else {
$(“#masthead”).removeClass(“-sticky”);
}
});Laxe
Participantไม่ได้ใช้ Page builder plugin คับ
-
ผู้เขียนข้อความ