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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
แนวนอนg เมนู เลื่อน jquery

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

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


โค้ดตัวอย่างนี้ เป็นการประยุกต์จาก 2 เนื้อหาด้านล่างมาใช้งานอย่างง่าย
การปรับแต่งเพิ่มเติม สามารถทำได้ตามความต้องการ รูปแบบการทำงาน
คือ เมื่อเราเลื่อน scroll bar หน้าเพจลงมาถึงตำแหน่งที่เรากำหนด ให้แสดง
เมนูในแถบด้านบน ที่ถูกซ่อนอยู่ และเมื่อเลื่อนหน้าเพจกลับมาตำแหน่งบนสุด
เมนูด้านบนที่ถูกซ่อนอยู่ ก็จะหายไป แบบนี้เป็นต้น
 
CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table 
 
แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery 
 
ตัวอย่าง
 
 
 
โค้ดตัวอย่าง
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





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







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ