Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > อยากได้โค๊ดเลื่อน scroll bar ทีละเยอะครับ ประมาณ650px

อยากได้โค๊ดเลื่อน scroll bar ทีละเยอะครับ ประมาณ650px

เริ่มหัวข้อใหม่

โพสกระทู้ ( 12 )
บทความ ( 0 )

Code (PHP)

<!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="css/style.css">

</head>

<body >

<ul class="v_menu">  
    <li><a href="#"><IMG SRC="image/CostMotor Logo2.pn" WIDTH="130" HEIGHT="40" BORDER="0" ALT=""></a>  

    </li>  
	<li><a href="#">หน้าแรก</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="#"><IMG SRC="image/CostMotor Logo2.pn" WIDTH="100" HEIGHT="40" BORDER="0" ALT=""></a>  

    </li>
    <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 class="abody">


</div>

<div class="bbody">


</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>

Code css(PHP)

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:15px;  
    z-index: 9999;    
    background-color: #8671EF;
    height: 40px;  /*ความสูง*/    
    border-bottom: 2px #7A6DDC dashed;  
}  
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูหลัก */  
    display:block;  
    width:150px;  
    height:40px;  /*ความสูง*/  
    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:40px;/*เส้นประใต้เมนู*/          
    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;   
}

.abody{
display: block;
    width: 100%;    
    list-style:none;  
    margin:0px;  
    padding:0px;  
  
    font-size:15px;  
    z-index: 9999;    
    background-color: #CC99CC;
    height: 620px;  /*ความสูง*/    
      
}

.bbody{
display: block;
    width: 100%;    
    list-style:none;  
    margin:0px;  
    padding:0px;  
  
    font-size:15px;  
    z-index: 9999;    
    background-color:#99CC66;
    height: 620px;  /*ความสูง*/    
      
}

Tag : PHP

Date : 2015-01-05 12:46:04

By : makotomc

View : 1174

Reply : 1

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

ตอนนี้มันเป็นยังไงครับ มีภาพประกอบ ?

Date : 2015-01-05 17:18:34

By : mr.win

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : อยากได้โค๊ดเลื่อน scroll bar ทีละเยอะครับ ประมาณ650px

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); อยากได้โค๊ดเลื่อน scroll bar ทีละเยอะครับ ประมาณ650px

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

อยากได้โค๊ดเลื่อน scroll bar ทีละเยอะครับ ประมาณ650px