ตอบกลับไปยัง: ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ

ผมใช้ 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”);
}
});