سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> body{ margin:0; } ul.MyMenu{ padding:0; margin:0; list-style-type:none; overflow: hidden; background-color:#333333; } ul.MyMenu li{ float:right; } ul.MyMenu li a{ display:block; text-decoration:none; padding:10px 15px; color:#fff; } ul.MyMenu li a:hover{ background-color:#d51c00; } .MyContent{ padding:30px 10px; text-align:center; } .MyHeader{ background-color:#d51c00; color:#fff; padding:10px; text-align:center; } .sticky { position: fixed; top: 0; width: 100% } </style> </head> <body dir="rtl" onscroll="MyFixedMenu();"> <div class="MyHeader"> <h2>سایت آموزشی فری لرن</h2> </div> <ul class="MyMenu" id="MyMenu"> <li><a href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> </ul> <div class="MyContent"> <h2>به سمت پایین اسکرول کنید</h2> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> </div> <script> var MyNavbar = document.getElementById("MyMenu"); var MySticky = MyNavbar.offsetTop; function MyFixedMenu() { if( window.pageYOffset >= MySticky ){ MyNavbar.classList.add("sticky") }else{ MyNavbar.classList.remove("sticky"); } } </script> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
