เปลี่ยนเมนูแนวนอน 2 ชั่น เมื่อเลื่อน scroll bar ในเพจ อย่างง่าย

12 September 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

เลื่อน แนวนอนg เมนู jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เลื่อน แนวนอนg เมนู jquery

ดูแล้ว 14,854 ครั้ง

โค้ดตัวอย่างนี้ เป็นการประยุกต์จาก 2 เนื้อหาด้านล่างมาใช้งานอย่างง่าย

การปรับแต่งเพิ่มเติม สามารถทำได้ตามความต้องการ รูปแบบการทำงาน

คือ เมื่อเราเลื่อน scroll bar หน้าเพจลงมาถึงตำแหน่งที่เรากำหนด ให้แสดง

เมนูในแถบด้านบน ที่ถูกซ่อนอยู่ และเมื่อเลื่อนหน้าเพจกลับมาตำแหน่งบนสุด

เมนูด้านบนที่ถูกซ่อนอยู่ ก็จะหายไป แบบนี้เป็นต้น

CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table

https://www.ninenik.com/content.php?arti_id=144 via @ninenik

แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery

https://www.ninenik.com/content.php?arti_id=421 via @nin

ตัวอย่าง

โค้ดตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<!--    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="mycss.css">
</head>
<body>

<ul class="v_menu">  
    <li><a href="#">Link menu item 1</a>  
        <ul>  
            <li><a href="#">Sub menu item 1</a></li>  
            <li><a href="#">Sub menu item 2</a></li>  
            <li><a href="#">Sub menu item 3</a></li>  
            <li><a href="#">Sub menu item 4</a></li>  
        </ul>   
    </li>  
    <li><a href="#">Link menu item 2</a></li>  
    <li><a href="#">Link menu item 3</a>  
        <ul>  
            <li><a href="#">Sub menu item 1</a></li>  
            <li><a href="#">Sub menu item 2</a></li>  
            <li><a href="#">Sub menu item 3</a></li>  
            <li><a href="#">Sub menu item 4</a></li>          
            <li><a href="#">Sub menu item 5</a></li>  
            <li><a href="#">Sub menu item 6</a></li>  
            <li><a href="#">Sub menu item 7</a></li>  
            <li><a href="#">Sub menu item 8</a></li>      
        </ul>       
    </li>  
    <li><a href="#">Link menu item 4</a></li>             
</ul>  
      
<ul class="v_menu sticky">  
    <li><a href="#">Link menu item 1</a>  
        <ul>  
            <li><a href="#">Sub menu item 1</a></li>  
            <li><a href="#">Sub menu item 2</a></li>  
            <li><a href="#">Sub menu item 3</a></li>  
            <li><a href="#">Sub menu item 4</a></li>  
        </ul>   
    </li>  
    <li><a href="#">Link menu item 2</a></li>  
    <li><a href="#">Link menu item 3</a>  
        <ul>  
            <li><a href="#">Sub menu item 1</a></li>  
            <li><a href="#">Sub menu item 2</a></li>  
            <li><a href="#">Sub menu item 3</a></li>  
            <li><a href="#">Sub menu item 4</a></li>          
            <li><a href="#">Sub menu item 5</a></li>  
            <li><a href="#">Sub menu item 6</a></li>  
            <li><a href="#">Sub menu item 7</a></li>  
            <li><a href="#">Sub menu item 8</a></li>      
        </ul>       
    </li>  
    <li><a href="#">Link menu item 4</a></li>             
</ul>        
<div style="margin:auto;width:100%;">
<span>This is line 1</span>
<br>
<span>This is line 2</span>
<br>
<span>This is line 3</span>
<br>
<span>This is line 4</span>
<br>
<span>This is line 5</span>
<br>
<span>This is line 6</span>
<br>
<span>This is line 7</span>
<br>
<span>This is line 8</span>
<br>
<span>This is line 9</span>
<br>
<span>This is line 10</span>
<br>
<span>This is line 11</span>
<br>
<span>This is line 12</span>
<br>
<span>This is line 13</span>
<br>
<span>This is line 14</span>
<br>
<span>This is line 15</span>
<br>
<span>This is line 16</span>
<br>
<span>This is line 17</span>
<br>
<span>This is line 18</span>
<br>
<span>This is line 19</span>
<br>
<span>This is line 20</span>
<br>
<span>This is line 21</span>
<br>
<span>This is line 22</span>
<br>
<span>This is line 23</span>
<br>
<span>This is line 24</span>
<br>
<span>This is line 25</span>
<br>
<span>This is line 26</span>
<br>
<span>This is line 27</span>
<br>
<span>This is line 28</span>
<br>
<span>This is line 29</span>
<br>
<span>This is line 30</span>
<br>
<span>This is line 31</span>
<br>
<span>This is line 32</span>
<br>
<span>This is line 33</span>
<br>
<span>This is line 34</span>
<br>
<span>This is line 35</span>
<br>
<span>This is line 36</span>
<br>
<span>This is line 37</span>
<br>
<span>This is line 38</span>
<br>
<span>This is line 39</span>
<br>
<span>This is line 40</span>
<br>
<span>This is line 41</span>
<br>
<span>This is line 42</span>
<br>
<span>This is line 43</span>
<br>
<span>This is line 44</span>
<br>
<span>This is line 45</span>
<br>
<span>This is line 46</span>
<br>
<span>This is line 47</span>
<br>
<span>This is line 48</span>
<br>
<span>This is line 49</span>
<br>
<span>This is line 50</span>
<br>
 
    <br style="clear:both;" >
    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<!--<script type="text/javascript" src="script.js"></script>        -->
<script type="text/javascript" >
$(function () {
    
    // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ    
     $(window).scroll(function(){    
//      เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่งที่มากกว่าหรือเท่ากับตำแหน่งที่ต้องการ  
//      เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่ง ที่ทำให้ div  
      // console.log($(document).scrollTop());  
         if($(document).scrollTop()>30){   
            $(".sticky").css({ /*  */  
                'top':'0px'  
            });  
         }else{  // เลื่อนกลับมาอยู่ตำแหน่งเดิม ถ้าไม่อยู่ในเงื่อนไข  
            $(".sticky").css({  
                'top':'-100px'  
            });  
         }    
     });      
    
});
 </script>    
</body>
</html>

ไฟล์ mycss.css

body,html{  
    margin:0;  
    padding:0;    
    font-family:Tahoma, Geneva, sans-serif;  
    font-size:12px;  
}  
ul.v_menu{ /* กำหนดขอบเขตของเมนู */  
    display: block;
    width: 100%;    
    list-style:none;  
    margin:0px;  
    padding:0px;  
    font-family:tahoma, "Microsoft Sans Serif", Vanessa;  
    font-size:12px;  
    z-index: 9999;    
    background-color: #8671EF;
    height: 32px;    
    border-bottom: 1px #7A6DDC dashed;  
}  
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูหลัก */  
    display:block;  
    width:150px;  
    height:32px;  
    text-indent:5px;  
    background-color:#8671EF;  
    float:left;  
    text-align:center;  
    transition: all 0.3s    
}  
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */  
    display:block;  
    width:150px;  
    text-indent:5px;  
    background-color:#B2A8FE;  
    float:left;  
    text-align:center;    
}  
ul.v_menu > li > a,ul.v_menu > li > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */  
    display:block;  
    width:150px;  
    height:32px;          
    text-decoration:none;  
    color:#FFFFFF;  
    line-height:30px;  
    border-bottom: 1px #B2A8FE dashed;    
}  
ul.v_menu > li > ul{   
    display:none;  
    list-style:none;  
    margin:0px;  
    padding:0px;  
    position: relative;
}  
ul.v_menu > li:hover > ul {   
    display:block;  
    width:150px;  
}     
ul.v_menu > li > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */  
    display:block;  
    width:150px;  
    height:32px;  
    text-indent:5px;  
    background-color:#8671EF;  
    border-bottom: 1px #FFFFFF dashesed;
    float:left;  
    text-align:center;  
    transition: all 0.3s    
}  
ul.v_menu > li > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */  
    display:block;  
    width:150px;  
    height:32px;      
    text-indent:5px;  
    background-color:#B2A8FE;  
    float:left;  
    text-align:center;  
}  

/*ส่วนของเมนูที่ 2 ที่จะยึดไว้ด้านบนกรณีเลื่อน scroll bar มาถึงตำแหน่งที่ต้องการ*/
ul.v_menu.sticky{
    position: fixed;
    top: -100px;
     transition: all 0.4s;   
    background-color: #000000;   
    border-bottom: 1px #757575 dashed;       
    z-index: 9999;
}
ul.v_menu.sticky li{
      background-color: #000000;      
}
ul.v_menu.sticky li:hover{
      background-color: #757575;      
}
ul.v_menu.sticky > li > a,ul.v_menu > li > ul > li > a{
    border-bottom: 1px #757575 dashed;   
}

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน