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

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

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

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

ดูแล้ว 15,940 ครั้ง

โค้ดตัวอย่างนี้ เป็นการประยุกต์จาก 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ