Rumah hujung hadapan web tutorial js jQuery.Pin垂直滚动时固定导航实例分享

jQuery.Pin垂直滚动时固定导航实例分享

Jan 10, 2018 pm 01:48 PM
tetap navigasi

ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击。本文主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助大家。

jQuery Pin

借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素。

http://webpop.github.io/jquery.pin/

添加脚本

向页面中添加脚本,使用 jquery.pin 来固定导航。为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到。

1. 布局组件 -> 默认布局 -> 底部 将脚本添加到页面的底部。

2. 选择脚本组件,点击下一步

3. 输入以下脚本内容,保存


<script type="text/javascript" src="http://cdn.zkea.net/Scripts/jquery.pin.min.js"></script>
<script type="text/javascript">
$(function () {
$(".navigation").closest(".widget").parent().css("z-index",10000).pin();
})
</script>
Salin selepas log masuk

这样就完成了,可以到对应的页面去预览一下效果了。

相关推荐:

用jQuery实现固定导航栏效果

怎么固定导航栏_html/css_WEB-ITnose

jQuery实现仿百度帖吧头部固定导航效果_jquery

Atas ialah kandungan terperinci jQuery.Pin垂直滚动时固定导航实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Mar 25, 2024 am 09:36 AM

Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya

Bagaimana untuk menetapkan kertas dinding skrin kunci komputer yang tidak akan berubah Bagaimana untuk menetapkan kertas dinding skrin kunci komputer yang tidak akan berubah Jan 17, 2024 pm 03:24 PM

Secara umumnya, corak latar belakang desktop komputer boleh dilaraskan oleh pengguna. Walau bagaimanapun, bagi sesetengah pengguna Windows 10, mereka mahu dapat membetulkan imej latar belakang desktop pada komputer mereka, tetapi mereka tidak tahu cara untuk menetapkannya. Malah, ia sangat mudah dan mudah dikendalikan. Cara membetulkan kertas dinding skrin kunci komputer tanpa mengubahnya 1. Klik kanan gambar yang anda ingin tetapkan dan pilih Tetapkan sebagai gambar latar belakang 2. Win+R untuk membuka dan menjalankan, kemudian masukkan "gpedit.msc" 3. Kembangkan ke: Konfigurasi Pengguna - Templat Pengurusan - Panel Kawalan - Pemperibadian 4. Klik Pemperibadian, dan kemudian pilih "Cegah perubahan pada latar belakang desktop" 5. Pilih Didayakan 6. Kemudian buka tetapan dan masukkan latar belakang Apabila anda melihat perkataan kecil ini, ia bermakna ia telah ditetapkan.

Cara memastikan panel widget sentiasa kelihatan dalam Windows 11 Cara memastikan panel widget sentiasa kelihatan dalam Windows 11 Aug 13, 2023 pm 07:13 PM

Bagaimana untuk sentiasa menunjukkan papan widget semasa membuka Windows 11? Nah, anda boleh mulakan dengan memuat turun dan memasang kemas kini Windows terkini. Dalam tampung kemas kini terbaharu untuk Program Insider, Microsoft mendedahkan bahawa pengguna dalam saluran Pembangunan dan Canary akan dapat menyemat papan widget terbuka supaya ia sentiasa kelihatan sepintas lalu. Cara Sentiasa Tunjukkan Papan Widget Terbuka dalam Windows 11 Menurut Microsoft, untuk menyemat papan untuk dibuka, cuma klik pada ikon tekan tekan di sudut kanan atas papan. Setelah papan anda disematkan terbuka, papan widget tidak akan mengabaikan penutupan lagi. Semasa papan disematkan, anda masih boleh menutupnya dengan membuka papan widget melalui butang Widget pada bar tugas. apabila widget

Apakah angka mendatar 8 pada peta navigasi? Apakah angka mendatar 8 pada peta navigasi? Jun 27, 2023 am 11:43 AM

Angka mendatar 8 pada peta navigasi bermaksud jerebu, sederhana ialah isyarat amaran kuning 8, dan teruk ialah isyarat amaran oren 8.

Apl Peta Baidu versi terbaharu 18.8.0 dikeluarkan, memperkenalkan fungsi radar lampu isyarat buat kali pertama dan menambah fungsi pengesyoran tempat letak kereta masa nyata Apl Peta Baidu versi terbaharu 18.8.0 dikeluarkan, memperkenalkan fungsi radar lampu isyarat buat kali pertama dan menambah fungsi pengesyoran tempat letak kereta masa nyata Aug 06, 2023 pm 06:05 PM

Baidu Map App versi Android dan iOS telah mengeluarkan versi 18.8.0, yang memperkenalkan fungsi radar lampu isyarat buat kali pertama, menerajui industri Menurut pengenalan rasmi, selepas menghidupkan radar lampu isyarat, ia menyokong pengesanan automatik lampu isyarat semasa memandu tanpa perlu memasuki destinasi Beidou High-Precision boleh meletakkan kedudukan dalam masa nyata , 1 juta+ lampu isyarat di seluruh negara secara automatik mencetuskan peringatan gelombang hijau. Selain itu, fungsi baharu ini juga menyediakan navigasi senyap penuh, menjadikan kawasan peta lebih ringkas, maklumat penting sepintas lalu, dan tiada siaran suara, membolehkan pemandu lebih fokus pada pemanduan Peta Baidu akan melancarkan fungsi kira detik lampu isyarat Oktober 2020, menyokong ramalan kira detik masa nyata, navigasi akan memaparkan baki detik kira detik secara automatik apabila menghampiri persimpangan lampu isyarat, membolehkan pengguna sentiasa memahami keadaan jalan di hadapan. Kira detik lampu isyarat hingga 31 Disember 2022

Perisian navigasi yang manakah mengandungi pakej suara navigasi bola sepak? Perisian navigasi yang manakah mengandungi pakej suara navigasi bola sepak? Nov 09, 2022 pm 04:33 PM

Pakej suara navigasi bola sepak dalam perisian "Navigasi Amap" ialah salah satu pakej suara navigasi untuk versi kereta peta Amap Kandungannya ialah suara navigasi versi ulasan bola sepak Huang Jianxiang. Kaedah tetapan: 1. Buka perisian Amap; 2. Klik untuk memasukkan pilihan "Lagi Alat" - "Suara Navigasi" 3. Cari "Suara Ghairah Huang Jianxiang" dan klik "Muat turun"; , klik " Hanya gunakan suara".

Amap melancarkan versi perkhidmatan ETA pemanduan yang dinaik taraf: analisis masa nyata keadaan jalan semasa dan anggaran masa ketibaan yang lebih tepat 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 menyematkan nota komputer pada desktop Bagaimana untuk menyematkan nota komputer pada desktop Feb 15, 2024 pm 04:00 PM

Sistem pengendalian Windows 10 prabenam dengan fungsi nota yang mudah supaya pengguna yang dihargai boleh menulis nota atau mesej sementara mengikut kehendak mereka. Katakan anda ingin menggunakan ini sebagai alat untuk mencari dan menggunakan nota melekit dengan cepat dan mudah, atau anda ingin menyematkan program kecil praktikal ini di tengah-tengah skrin besar untuk rujukan mudah Anda boleh merealisasikan hasrat di atas hanya dalam beberapa perkara mudah langkah: Cara menyemat nota melekit pada komputer anda Pada desktop 1. Klik Mula dan kemudian klik nota lekit di sini 2. Selepas membuka nota lekat, anda boleh terus memasukkan kandungan yang sepadan di sini, dan anda juga boleh mengklik tanda tambah di atas untuk menambah kandungan baharu 3. Jika anda ingin menggunakan pihak ketiga Jika anda mempunyai perisian pengambilan nota, anda boleh memasukkan tetapan perisian yang sepadan untuk beroperasi.

See all articles