 |
| Menu Saat Tampilan Awal |
 |
| Menu Setelah di scroll |
Sering kali kita jumpai sebuah website yang memiliki navigasi menu, yang ditempatkan pada posisi tertentu akan tetapi pada saat scroll down, navigasi menu tersebut akan pindah di bagian atas browser kita.
Untuk membuat hal ini terjadi kita membutuhkan jquery, silakan mendownload filenya disini, ok berikut merupakan cara membuatnya.
HTML
Pertama kita buat terlebih dahulu konten htmlnya, perlu konten yang panjang untuk bisa melihat hal ini terjadi, letakan script berikut di antara tag <body></body>
<h1> Membuat menu yang mengikuti pada saat scroll down </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<div class="menu">
<h1>Bagian ini akan mengikuti saat anda scroll kebawah</h1>
</div>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
CSS
css disini hanya untuk membuat menu tersebut lebih terlihat, saya menggunakan class menu sebagai penampung / bagian yang akan dibuat berubah posisinya saat scroll kebawah
<style>
.menu {
background-color:#000000;color:#ffffff;text-align:center; position:absolute; top: 50px;width:100%;
}
</style>
Javacsript
javascript ini merupakan faktor utama agar mendapatkan yang kita inginkan.
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
// Mengecek poisi screen
$(window).scroll(function(){
if( $(window).scrollTop() > 200 ) {
$('.menu').css({position: 'fixed', top: '20px' , width: '100%'});
} else {
$('.menu').css({position: 'static', top: '20px', width: '100%'});
}
});
});
</script>
Penjelasan : seperti yang dibicarakan pada awal artikel bahwa kita memerlukan jquery untuk membuatnya.
<script src="jquery.js"></script> merupakan script import jquery. lalu function setelahnya digunakan untuk mengecek posisi screen
$(window).scrollTop() > 200 "mengecek apakah posisi screen sudah scroll kebawah lebih dari 200px "
$('.menu').css({position: 'fixed', top: '20px' , width: '100%'}); " jika sudah maka ubah css class menu menjadi fix dan padding atas 20px dengan panjang 100% "
$('.menu').css({position: 'static', top: '20px', width: '100%'}); " jika tidak / kurang dari 200 maka ubah css class menu menjadi static dsb
Full Script
Berikut merupakan script secara keseluruhan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu {
background-color:#000000;color:#ffffff;text-align:center; position:absolute; top: 50px;width:100%;
}
</style>
</head>
<body>
<h1> Membuat menu yang mengikuti pada saat scroll down </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<div class="menu">
<h1>Bagian ini akan mengikuti saat anda scroll kebawah</h1>
</div>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis dictum augue nec porta. Donec urna dolor, congue et lectus ac, aliquet dictum massa. Nullam quam nibh, porta a nunc accumsan, gravida consectetur arcu. Duis vehicula augue non lorem tincidunt, vel fermentum nibh ullamcorper. Suspendisse vel velit ante. Nullam laoreet mi vel odio aliquet, quis tincidunt eros aliquet. Vivamus sit amet purus metus. Nullam euismod magna ex, in cursus tellus sodales in. Curabitur molestie interdum libero. Integer molestie nulla quis ultrices vestibulum. Vivamus quis tristique purus. Proin et quam eu tellus bibendum vulputate. In eget odio imperdiet, pharetra massa sollicitudin, mattis ligula. Integer nec lectus urna. Donec eget viverra arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Donec tristique imperdiet urna, id finibus neque mollis et. Phasellus suscipit elementum tempor. Nunc accumsan dignissim pulvinar. Mauris ac dui aliquet, convallis enim vulputate, finibus nisi. Ut elit dui, sodales id pretium ac, pellentesque at dui. Mauris ornare at tellus ac faucibus. Quisque eu ultricies nisl, quis congue urna. Vivamus vel sagittis ex. Nunc posuere nisi at dictum iaculis.
</p>
<p>
Ut vel nisl vitae ipsum eleifend porttitor eget eget sem. Sed scelerisque scelerisque mauris, at tempor justo posuere non. Pellentesque pharetra est at mauris dictum laoreet. Nulla volutpat velit odio, quis imperdiet tellus aliquam non. Sed nec nibh pellentesque, vehicula orci sed, venenatis nisl. Morbi interdum in enim sit amet porttitor. Vivamus mollis id ligula et dictum. Curabitur sodales magna vel libero pellentesque posuere ut a augue. Pellentesque congue imperdiet diam quis maximus. Donec viverra nulla vel urna luctus viverra. Etiam venenatis, eros eu bibendum ultricies, lacus mauris hendrerit ligula, sit amet efficitur nunc lectus quis velit. Donec vel sapien nunc. Aenean sollicitudin dui vitae diam pulvinar varius.
</p>
<p>
Phasellus in fermentum ex. In ut rhoncus mi. Pellentesque elementum commodo dolor. Aliquam iaculis eros vel purus tempor, vitae porttitor enim gravida. Sed non quam at augue dictum ultrices sed vel enim. Morbi auctor pellentesque eros condimentum ultricies. Mauris lorem ex, dapibus eget eros eu, tempus interdum risus. Curabitur neque sapien, porta in dictum non, tristique sit amet metus.
</p>
<p>
Praesent neque neque, dapibus ut arcu in, tempus consequat est. Mauris at nulla mauris. Nulla eget felis et mi auctor sagittis ut et justo. Curabitur tellus justo, fringilla sit amet tellus eget, tempor vehicula lorem. Aliquam suscipit purus sit amet justo aliquet iaculis. Nulla vitae pulvinar erat. Ut ac dolor bibendum, auctor velit sed, imperdiet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempus elit eget lorem lacinia, id condimentum massa blandit.
</p>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
// Check the initial Poistion of the Sticky Header
$(window).scroll(function(){
if( $(window).scrollTop() > 200 ) {
$('.menu').css({position: 'fixed', top: '20px' , width: '100%'});
} else {
$('.menu').css({position: 'static', top: '20px', width: '100%'});
}
});
});
</script>
</html>