Laxe

ขอบคุณครับ เดี๋ยวนำไปปรับแก้ไขกับเว็บ

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