JQuery導(dǎo)航欄固定及回到頂部
1.頁(yè)面布局
<div id="wrap">
<div class="top">
<h2>top</h2>
</div>
<div class="nav">
<h2>nav</h2>
</div>
<div class="main">
<h2>main</h2>
</div>
<div class="gotop">
<img src="../images/gotop.png" alt="">
</div>
</div>
2.css樣式
<style>
* { margin: 0; padding: 0; }
#wrap { text-align: center; }
#wrap .top { margin: 0 auto; width: 1423px; height: 168px; background: skyblue; }
#wrap .nav { margin: 0 auto; width: 1423px; height: 120px; background: red; }
#wrap .main { margin: 0 auto; width: 1423px; height: 2000px; background: skyblue; }
#wrap .gotop { display: none; position: fixed; right: 40px; bottom: 50px; cursor: pointer; }
#wrap .gotop img { height: 80px; }
#wrap .fixed { position: fixed; left: 0; right: 0; top: 0; }
</style>
3.JS代碼
<script>
$(function () {
//在需要fixed固定定位的元素外包裹div鸠补，防止塌陷
$(".nav").wrap("<div></div>");
//窗口滾動(dòng)，nav導(dǎo)航條固定
$(window).on("scroll", function () {
//滾動(dòng)至nav的頂部時(shí)固定
if ($(window).scrollTop() >= $(".top").height()) {
$(".nav").addClass("fixed");
} else {
$(".nav").removeClass("fixed");
}
//回到頂部圖標(biāo)淡入
if ($(window).scrollTop() >= 500) {
$(".gotop").fadeIn(1000);
} else {
$(".gotop").fadeOut(1200);
}
});
//回到頂部事件
$(".gotop").on("click", function () {
$("html,body").animate({
"scrollTop": "0px"
}, 1000)
});
});
</script>
