登录 | 注册 | FAQ
Anonymous

JS - Menu scroll and fixed

+ 发表回复

1 篇帖子 分页: 1 / 1


JS - Menu scroll and fixed

taynguyenem » 周二 2月 12, 2019 8:30 am

Hi all,

Today I will introduce JS - Menu scroll and fixed to everyone

Coding is divided by three part, HTMl, CSS and JS

Demo in Menu left on website http://winzipdownload.net/


1. HTML

<div class="top-container">
<h1>Scroll Down</h1>
<p>Scroll down to see the sticky effect.</p>
</div>

<div class="header" id="myHeader">
<h2>My Header</h2>
</div>

<div class="content">
<h3>On Scroll Sticky Header</h3>
<p>The header will stick to the top when you reach its scroll position.</p>
<p>Scroll back up to remove the sticky effect.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

2. CSS
<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: #555;
color: #f1f1f1;
}

.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: 102px;
}
</style>


3. JS

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

Good luck!!!
头像

taynguyenem

  • 帖子: 27
  • 注册: 周一 2月 05, 2018 3:28 pm
--
Preview site only Html: teamviewdownload.com, winrarfree.net


+ 发表回复

分页: 1 / 1