简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

用jQuery实现固定导航栏效果

一个新手
Lepaskan： 2017-09-18 09:08:43
asal
2194 orang telah melayarinya

jQuery实现固定导航栏效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定导航栏效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
.fixed{
top: 0;
left: 0;
position: fixed;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(document).ready(function(){
//
 
入口函数
$(window).scroll(function(){
//
 
添加滚动事件
if($(window).scrollTop() >= $(".top").height()){
//
 
判断窗口的滚动如果大于top的高度就为nav添加fixed
$(".nav").addClass("fixed");
}else{
//
 
否则就为nav移除fixed
$(".nav").removeClass("fixed");
}
});
});
</script>
</head>
<body>
<p class="top">
<img src="img/top.png"/>
</p>
<p class="nav">
<img src="img/nav.png"/>
</p>
<p class="main">
<img src="img/main.png"/>
</p>
</body>
</html>
Salin selepas log masuk


Atas ialah kandungan terperinci 用jQuery实现固定导航栏效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
jquery 导航 效果
sumber：php.cn
Artikel sebelumnya：JS验证码功能讲解 Artikel seterusnya：jquery ajax 传递数组到后台失败的问题
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Langkah-langkah untuk memasang jQuery dalam Nuxt.js Walaupun saya cuba menambah jQuery dalam projek saya, saya mendapat ralat mengatakan ia ti...
daripada 2023-11-06 16:41:50
0
1
225
jQuery mendapat nilai yang salah apabila mendapat atribut data Saya mempunyai div dengan atribut data <divclass='p1'data-location='1'></div> ...
daripada 2023-11-01 23:01:19
0
1
209
Sokong Pemindahan-Pengekodan jQuery:chunked Saya seorang pembangun web. Dalam skrip saya, saya menggunakan header() untuk menetapkan &...
daripada 2023-10-25 23:44:37
0
1
230
Bagaimana untuk mendapatkan dimensi semula jadi imej menggunakan JavaScript atau jQuery? Setakat ini saya mempunyai kod ini: varimg=document.getElementById('draggable'); varwidth=...
daripada 2023-10-21 13:53:08
0
2
275
Kembangkan kawasan teks secara automatik Saya cuba membuat kawasan teks pengembangan automatik yang mudah. Ini kod saya: textarea.o...
daripada 2023-10-21 08:49:23
0
2
225
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！