Laxe

ตอบกระทู้

กำลังดู 4 ข้อความ - 1 ผ่านทาง 4 (ของทั้งหมด 4)
  • ผู้เขียน
    ข้อความ
  • เพื่อตอบกลับ: ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ #307218
    Facebook Profile photoLaxe
    Participant

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

    เพื่อตอบกลับ: ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ #307217
    Facebook Profile photoLaxe
    Participant

    ขอบคุณครับ

    เพื่อตอบกลับ: ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ #297668
    Facebook Profile photoLaxe
    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”);
    }
    });

    เพื่อตอบกลับ: ส่งการบ้าน เว็บขายข้าวแบบบ้านๆ #297666
    Facebook Profile photoLaxe
    Participant

    ไม่ได้ใช้ Page builder plugin คับ

กำลังดู 4 ข้อความ - 1 ผ่านทาง 4 (ของทั้งหมด 4)