Rumah hujung hadapan web tutorial js javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

May 16, 2016 pm 05:43 PM
tetap tatal atas

现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部。其实就是改变 position 的值。
html 代码

复制代码 代码如下:
















menuFixed.js 代码
复制代码 代码如下:

function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}

最后需要说明的是,该效果在 ie6 下不支持,因为 ie6 不支持 position:fixed;
PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
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)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
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

Bagaimana untuk melaksanakan tatal ke kedudukan elemen tertentu dalam JavaScript? Bagaimana untuk melaksanakan tatal ke kedudukan elemen tertentu dalam JavaScript? Oct 22, 2023 am 08:12 AM

Bagaimana untuk melaksanakan fungsi menatal ke kedudukan elemen tertentu dalam JavaScript? Dalam halaman web, apabila kita perlu menumpukan perhatian pengguna kepada kedudukan elemen tertentu, kita boleh menggunakan JavaScript untuk melaksanakan fungsi menatal ke kedudukan elemen yang ditentukan. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini melalui JavaScript dan memberikan contoh kod yang sepadan. Pertama, kita perlu mendapatkan maklumat kedudukan elemen sasaran. Anda boleh menggunakan Element.getBoundingClient

HTML, CSS dan jQuery: Buat papan buletin tatal automatik HTML, CSS dan jQuery: Buat papan buletin tatal automatik Oct 27, 2023 pm 06:31 PM

HTML, CSS dan jQuery: Buat papan buletin menatal secara automatik Dalam reka bentuk web moden, papan buletin sering digunakan untuk menyampaikan maklumat penting dan menarik perhatian pengguna. Papan buletin tatal automatik digunakan secara meluas pada halaman web Ia membolehkan kandungan buletin menatal dan memaparkan pada halaman dalam bentuk animasi, meningkatkan kesan paparan maklumat dan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membuat papan buletin tatal automatik dan memberikan contoh kod khusus. Pertama, kita memerlukan HT

Pantau tingkah laku menatal iframe Pantau tingkah laku menatal iframe Feb 18, 2024 pm 08:40 PM

Cara memantau penatalan iframe memerlukan contoh kod khusus Apabila kami menggunakan teg iframe untuk membenamkan halaman web lain dalam halaman web, kadangkala kami perlu melakukan beberapa operasi khusus pada kandungan dalam iframe. Salah satu keperluan biasa ialah mendengar acara tatal iframe supaya kod yang sepadan boleh dilaksanakan apabila tatal berlaku. Berikut akan memperkenalkan cara menggunakan JavaScript untuk memantau penatalan iframe, dan menyediakan contoh kod khusus untuk rujukan. Dapatkan elemen iframe Pertama, kita perlukan

Bagaimana untuk melaksanakan kesan tatal skrin penuh dalam Vue Bagaimana untuk melaksanakan kesan tatal skrin penuh dalam Vue Nov 08, 2023 am 08:42 AM

Bagaimana untuk mencapai kesan tatal skrin penuh dalam Vue Dalam reka bentuk web, kesan tatal skrin penuh boleh membawa pengguna pengalaman menyemak imbas yang sangat unik dan lancar. Artikel ini akan memperkenalkan cara untuk mencapai kesan tatal skrin penuh dalam Vue.js, serta contoh kod khusus. Untuk mencapai kesan tatal skrin penuh, kita perlu menggunakan rangka kerja Vue.js untuk membina projek. Dalam Vue.js, kita boleh menggunakan vue-cli untuk membina rangka projek dengan cepat. Kemudian kita perlu memperkenalkan beberapa perpustakaan pihak ketiga untuk mencapai kesan penatalan, seperti halaman penuh

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