PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

12 September 2014 By


โค้ดตัวอย่างนี้ เป็นการประยุกต์จาก 2 เนื้อหาด้านล่างมาใช้งานอย่างง่าย
การปรับแต่งเพิ่มเติม สามารถทำได้ตามความต้องการ รูปแบบการทำงาน
คือ เมื่อเราเลื่อน scroll bar หน้าเพจลงมาถึงตำแหน่งที่เรากำหนด ให้แสดง
เมนูในแถบด้านบน ที่ถูกซ่อนอยู่ และเมื่อเลื่อนหน้าเพจกลับมาตำแหน่งบนสุด
เมนูด้านบนที่ถูกซ่อนอยู่ ก็จะหายไป แบบนี้เป็นต้น
 
CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table 
http://www.ninenik.com/content.php?arti_id=144 via @ninenik
 
แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery 
http://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;   
}

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





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