Preview
(1)
(2)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #2196F3;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
</style>
</head>
<body>
<div class="top-container">
<h1>បង្កើតកម្មវិធីដោយ មី ឡងឌី</h1>
<p>អាសយដ្ឋាន៖ ភូមិស៊ុង១ ឃុំស៊ុង ស្រុកសំឡូត ខេត្តបាត់ដំបង</p>
</div>
<div class="header" id="myHeader">
<h2>ឧទា. សុភាសិតខ្មែរ (No scroll)</h2>
</div>
<div class="content">
<h3>សុភាសិតខ្មែរមានដូចតទៅ៖</h3>
<p>
* ក្រអ្វីក្រចុះកុំឲ្យតែក្រគំនិត។<hr><br>
* ក្រមុំដណ្ដឹងម្ដាយមេម៉ាយដណ្ដឹងចិត្ត។<hr><br>
* ក្រពើវង្វេងបឹង។<hr><br>
</p>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>
0 Comments