关于jQuery实现定位导航效果
本文主要为大家详细介绍了基于jQuery实现定位导航位置效果，并分享了Android九宫格图片展示的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
当滚动条滚动到内容区域的时候，侧边导航条定位到屏幕，不再动，并且点击导航条跳转到内容所在的位置；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
padding: 0;
margin: 0;
}
.left{
float: left;
padding: 0 0 328px 0;
}
.left p{
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 30px;
background: gray;
margin: 10px 0;
}
.nav{
position: absolute;
right:20px;
top: 20px;
}
.nav p{
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
background: pink;
margin: 10px 0;
cursor: pointer;
}
.bottom{
overflow: hidden;
width: 100%;
position: relative;
}
</style>
<title>Document</title>
</head>
<body>
<img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">
<p class="bottom">
<p class="left">
<p class="one leftp" id="one">
一
</p>
<p class="conOne leftp" id="two">
二
</p>
<p class="leftp" id="three ">
三
</p>
<p class="leftp" id="four">
四
</p>
</p>
<p class="nav">
<p class="one navp">one</p>
<p class="two navp">two</p>
<p class="three navp">three</p>
<p class="four navp">four</p>
</p>
</p>
<script src="jquery.js"></script>
<script>
$(window).scroll(function(e){
console.log($(window).scrollTop());
if ($(window).scrollTop() >$('#one').offset().top) {
$('.nav').css({'position':'fixed'});
console.log('ss');
} else{
$('.nav').css({'position':'absolute'});
}
})
$('.nav p').click(function(){
var i = $('.navp').index(this);
var x = $('.leftp').eq(i).offset().top;
$('html, body').animate({scrollTop:x+'px'},500);
})
</script>
</body>
</html>相关推荐：
Fullpage.js固定导航栏-实现定位导航栏_javascript技巧
Atas ialah kandungan terperinci 关于jQuery实现定位导航效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Bagaimana untuk mencari fon telinga wayarles Apple jika ia hilang_Cara untuk mencari fon telinga wayarles Apple
Mar 23, 2024 am 08:21 AM
1. Mula-mula, kami membuka Apl [Cari] pada telefon mudah alih dan pilih peranti dalam senarai pada antara muka peranti. 2. Kemudian, anda boleh menyemak lokasi dan klik pada laluan untuk menavigasi ke sana.
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Bagaimana untuk mencari lokasi telefon bimbit pihak lain di Amap - Bagaimana untuk mengesan lokasi telefon bimbit pihak lain di Amap
Apr 01, 2024 pm 02:11 PM
1. Klik untuk memasukkan perisian peta Amap pada telefon mudah alih anda. 2. Klik Saya di penjuru kanan sebelah bawah. 3. Klik untuk memasukkan peta keluarga. 4. Klik Cipta Peta Keluarga Saya. 5. Selepas penciptaan berjaya, kod jemputan akan muncul dan boleh dikongsi dengan telefon bimbit lain.
Cara menukar maklumat lokasi dan cara mengubah suai alamat
Mar 12, 2024 pm 09:52 PM
Kita semua tahu dengan jelas bahawa Taku APP ialah platform sembang dan sosial yang boleh dipercayai. Kini ia membolehkan semua orang berkawan dalam talian Lagipun, ia boleh mencari maklumat lokasi semasa anda secara automatik dan lebih baik memadankan anda dengan beberapa rakan di bandar yang sama yang rapat antara satu sama lain, supaya semua orang boleh bersembang dengan lebih mudah dan berasa gembira, berkali-kali, untuk mendapatkannya untuk mengetahui lebih ramai rakan di tempat lain, semua orang mempunyai idea untuk mengubah suai alamat mereka, tetapi mereka tidak tahu cara mengubah suai maklumat lokasi mereka, yang sangat sukar, jadi editor tapak ini juga mengumpul beberapa khusus
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Amap melancarkan versi perkhidmatan ETA pemanduan yang dinaik taraf: analisis masa nyata keadaan jalan semasa dan anggaran masa ketibaan yang lebih tepat
Apr 30, 2024 am 08:37 AM
Menurut berita dari laman web ini pada 29 April, Amap secara rasmi mengumumkan pelancaran versi ETA pemanduan yang dinaik taraf (Nota dari tapak ini: ETA ialah anggaran masa ketibaan, yang merujuk kepada anggaran masa yang diperlukan untuk pengguna berlepas dari saat semasa dan mengikut laluan tertentu ke destinasi ) perkhidmatan, yang bertujuan untuk membantu pengguna membuat anggaran tempoh perancangan laluan dan keadaan trafik yang lebih tepat, dan membantu pengguna dalam membuat keputusan perjalanan. Aplikasi peta ini ialah Aplikasi Amap yang dinaik taraf terbaharu Ia memperkenalkan "model rangkaian saraf konvolusi graf berskala besar", yang boleh menangkap dan mempelajari corak aliran trafik dengan lebih baik, menyokong rangkaian jalan bandar dan sistem lebuh raya, serta boleh menggambarkan spatiotemporal dengan tepat. perubahan dinamik keadaan lalu lintas. Selain itu, versi baharu peta menyepadukan lagi model ramalan siri masa iTransformer untuk menyokong analisis masa nyata.
Bagaimana untuk mencari lokasi telefon Huawei dengan cepat selepas ia hilang?
Mar 24, 2024 am 08:48 AM
Dalam masyarakat hari ini, telefon bimbit telah menjadi sebahagian daripada kehidupan kita. Sebagai jenama telefon pintar yang terkenal, telefon bimbit Huawei amat digemari oleh pengguna. Namun, dengan kepopularan telefon bimbit dan peningkatan kekerapan penggunaan, telefon bimbit sering hilang. Sebaik sahaja telefon kita hilang, kita cenderung berasa cemas dan keliru. Jadi, jika anda kehilangan telefon Huawei anda, bagaimanakah anda boleh mencari lokasinya dengan cepat? Langkah 1: Gunakan fungsi penentududukan telefon mudah alih Telefon bimbit Huawei mempunyai fungsi penentududukan berkuasa terbina dalam Pengguna boleh menggunakan pilihan "Keselamatan" dalam tetapan telefon mudah alih.
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
