jquery實現的固定位置下拉隱藏上拉顯示懸浮導航選單特效
阿新 • • 發佈：2019-02-07
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery固定位置下拉隱藏上拉顯示懸浮導航選單特效程式碼 </title> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> <style type="text/css"> body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'} #lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify} .yapiskan{ background-color:#e74c3c; color:white; font-size:24px; padding:5px; text-align:center; position: fixed; left:0; top:0; width:100%; transition: top .5s; } .gizle { top: -90px; } .sabit { top:0; z-index: 9999; } </style> </head> <body> <header class="yapiskan">LOGO位置</header> <div id="lipsum"> <p> 這是文章內容啊。。。。 </p> </div> </body> </html>
$(function(){ var cubuk_seviye = $(document).scrollTop(); var header_yuksekligi = $('.yapiskan').outerHeight(); alert( cubuk_seviye); $(window).scroll(function() { var kaydirma_cubugu = $(document).scrollTop(); if (kaydirma_cubugu > header_yuksekligi){$('.yapiskan').addClass('gizle');} else {$('.yapiskan').removeClass('gizle');} if (kaydirma_cubugu > cubuk_seviye){$('.yapiskan').removeClass('sabit');} else {$('.yapiskan').addClass('sabit');} cubuk_seviye = $(document).scrollTop(); }); });