|
 |
| |
สอบถามวิธีเขียนปุ่ม submit ให้สามารเลื่อนตามหน้าจอในเวอร์ชันโมบาย หน่อยครับ |
| |
 |
|
|
 |
 |
|
เช็คตำแหน่ง ScrollBar ด้วย JS เพื่อกำหนดค่า position ระหว่าง absolute กับ fixed
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// https://www.thaicreate.com/php/forum/135275.html
// ตรวจสอบตำแหน่งการ scroll Down/Up บนหน้าจอ แล้วเทียบกับตำแหน่งของ element
function checkOffset() {
if($('#social-float').offset().top + $('#social-float').height()
>= $('#footer').offset().top - 100)
$('#social-float').css('position', 'absolute'); // เปลี่ยนเป็น absolute เมื่อลงสุด Content
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#social-float').css('position', 'fixed'); // เปลี่ยนกลับเป็น fixed ตอนเลื่อนขึ้น
$('#social-float').text($(document).scrollTop() + window.innerHeight);
}
$(document).scroll(function() {
checkOffset();
});
</script>
<style>
div.social-float-parent {
width: 100%;
height: 1000px;
background: #f8f8f8;
position: relative;
}
div#social-float {
width: 200px;
position: fixed;
left: 50%;
transform: translate(-50%, 0);
bottom: 100px;
background: #77f;
text-align: center;
}
div#footer {
width: 100%;
height: 200px;
background: #eee;
text-align: center;
}
</style>
</head>
<body>
<div class="social-float-parent">
<div id="social-float">
<span>Submit</span>
</div>
</div>
<div id="footer">
<span>Footer</span>
</div>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=GFE6KQ7TN9VL
|
 |
 |
 |
 |
| Date :
2020-06-02 18:11:20 |
By :
PhrayaDev |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 01
|
