หน้าแรก › ฟอรั่ม › ส่งการบ้าน แชร์ผลงาน › ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ › ตอบกลับไปยัง: ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ
ผมใช้ 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”);
}
});