Rumah hujung hadapan web tutorial js xScrollStick 跟随滚动条漂浮的JS特效_布局与层

xScrollStick 跟随滚动条漂浮的JS特效_布局与层

May 16, 2016 pm 05:54 PM
bar skrol terapung

这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变

网上有很多类似的效果,本代码比较起来有如下优点:

1. 兼容IE6.0+ & FF1.5+
2. 使用非常简单,属于菜鸟最爱的那种拿来就能用的,见下面说明
3. 元素之间不会起冲突,一页中可以有n个特效,多元素使用无代码冗余

缺点有:

1. 只能在声明为xHTML的文档中使用
2. 元素最好放在body下
3. 滚动时不可避免的会有闪烁(已经比较轻微,但追求完美者可能觉得不爽)

使用说明:
在页面中引用JS包,然后在需要特效的div上设定class为xScrollStick即可,当然不要忘记给每个元素写上你希望它固定的位置

示例1:

复制代码 代码如下:


Content...


示例2:
复制代码 代码如下:


Content...


演示:

运行代码框
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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

Microsoft membawa bar skrol Fasih Windows 11 ke Google Chrome Microsoft membawa bar skrol Fasih Windows 11 ke Google Chrome Apr 14, 2023 am 10:52 AM

Tidak seperti Windows 10, Windows 11 menampilkan "bar skrol cecair" moden baharu yang berubah bentuk apabila pengguna berinteraksi dengannya. Bar skrol fasih bersifat dinamik, ia berskala secara automatik dalam faktor bentuk yang berbeza atau apabila anda menukar saiz tetingkap, dan pada masa ini ia digunakan dalam apl seperti Tetapan, Pemain Media dan banyak lagi. Google Chrome mungkin mempunyai fungsi bar skrol yang lancar tidak lama lagi, menurut cadangan baharu daripada Microsoft. Microsoft mengatakan dalam cadangan bahawa mereka mahu memodenkan bar skrol lama dalam Chrome

Bagaimana untuk menyembunyikan penatalan bar skrol dalam tindak balas Bagaimana untuk menyembunyikan penatalan bar skrol dalam tindak balas Dec 21, 2022 pm 03:38 PM

Bagaimana untuk menyembunyikan skrol bar skrol dalam bertindak balas: 1. Buka fail "react-native" yang sepadan 2. Tetapkan skrol mendatar melalui mendatar 3. Sembunyikan bar skrol mendatar dengan menetapkan nilai "showsHorizontalScrollIndicator" kepada "false".

Cara menetapkan bar skrol agar sentiasa dipaparkan pada sistem Mac - Cara menetapkan bar skrol agar sentiasa dipaparkan Cara menetapkan bar skrol agar sentiasa dipaparkan pada sistem Mac - Cara menetapkan bar skrol agar sentiasa dipaparkan Mar 18, 2024 pm 06:22 PM

Baru-baru ini, beberapa rakan telah merujuk kepada editor tentang cara menetapkan bar skrol sistem Mac untuk sentiasa dipaparkan . Langkah 1: Dalam menu mula sistem, pilih pilihan [System Preferences]. Langkah 3: Pada halaman Keutamaan Sistem, pilih pilihan [Umum]. Langkah 3: Pada halaman umum, pilih [Sentiasa] untuk memaparkan bar skrol.

Kaedah dan teknik bagaimana untuk mencapai kesan animasi terapung melalui CSS tulen Kaedah dan teknik bagaimana untuk mencapai kesan animasi terapung melalui CSS tulen Oct 25, 2023 am 08:10 AM

Kaedah dan teknik bagaimana untuk mencapai kesan animasi terapung melalui CSS tulen Dalam reka bentuk web moden, kesan animasi telah menjadi salah satu elemen penting yang menarik perhatian pengguna. Salah satu kesan animasi biasa ialah kesan terapung, yang boleh menambah rasa pergerakan dan kecergasan pada halaman web, menjadikan pengalaman pengguna lebih kaya dan menarik. Artikel ini akan memperkenalkan cara untuk mencapai kesan animasi terapung melalui CSS tulen, dan menyediakan beberapa contoh kod untuk rujukan. 1. Gunakan atribut peralihan CSS untuk mencapai kesan terapung Atribut peralihan CSS boleh

Bagaimana untuk mendayakan atau melumpuhkan bar skrol yang sentiasa dipaparkan dalam Windows 11? Bagaimana untuk mendayakan atau melumpuhkan bar skrol yang sentiasa dipaparkan dalam Windows 11? Apr 24, 2023 pm 05:58 PM

Sistem pengendalian Windows membolehkan pengguna menentukan sama ada bar skrol harus disembunyikan secara automatik apabila ia tidak aktif atau tidak digunakan. Windows, sebaliknya, mendayakan bar skrol secara lalai. Jika mana-mana pengguna ingin mendayakan atau melumpuhkan ciri ini pada sistem mereka, sila rujuk artikel ini untuk membantu mereka mengetahui caranya. Cara mendayakan atau melumpuhkan bar skrol sentiasa hidup dalam Windows 11 1. Menekan dan menahan kekunci Windows+U akan membuka halaman Kebolehcapaian pada sistem anda. 2. Pilih kesan visual dengan mengklik padanya, ia terletak di bahagian atas halaman Kebolehcapaian. 3. Jika anda ingin mendayakan ciri Sentiasa Tunjukkan Bar Tatal pada sistem anda, klik butang togol Sentiasa Tunjukkan Bar Tatal untuk menghidupkannya seperti yang ditunjukkan di bawah. 4. Anda sentiasa boleh menunjukkan

Cara mengodkan kotak teks bar skrol HTML Cara mengodkan kotak teks bar skrol HTML Feb 19, 2024 pm 07:38 PM

Tajuk: Cara menulis kod kotak teks HTML dengan bar skrol Kotak teks dalam HTML ialah salah satu kawalan input pengguna yang biasa digunakan Dalam sesetengah kes, apabila kandungan teks terlalu panjang, kotak teks akan dipaparkan tidak lengkap. Pada masa ini, kita boleh menambah bar skrol pada kotak teks untuk menyokong penatalan. Artikel ini akan memperkenalkan secara terperinci cara menulis kod kotak teks HTML dengan kesan bar skrol, dan memberikan contoh kod khusus. 1. Gunakan elemen textarea untuk mencipta kotak teks Dalam HTML, kami menggunakan elemen textarea untuk mencipta kotak teks.

Bagaimana untuk membuat bar skrol html Bagaimana untuk membuat bar skrol html Feb 22, 2024 pm 03:24 PM

Cara membuat bar skrol HTML memerlukan contoh kod khusus Dalam reka bentuk web, bar skrol adalah elemen biasa yang membolehkan halaman web mudah ditatal apabila terdapat terlalu banyak kandungan. Artikel ini akan memperkenalkan cara membuat bar skrol menggunakan HTML dan memberikan contoh kod khusus. Pertama, kita perlu memahami prinsip asas mencipta bar skrol dalam HTML. Gaya CSS boleh digunakan dalam HTML untuk mengawal penampilan dan kelakuan bar skrol. Secara khusus, kita boleh menggunakan sifat CSS untuk menetapkan bar skrol termasuk sifat yang biasa digunakan

Bagaimana untuk menyedari bar skrol tidak menduduki ketinggian dalam css Bagaimana untuk menyedari bar skrol tidak menduduki ketinggian dalam css Feb 01, 2023 am 09:27 AM

Bagaimana untuk melaksanakan bar skrol dalam CSS tanpa menduduki ketinggian: 1. Buka fail HTML yang sepadan 2. Cari kod asal "overflow-x: auto;" 3. Tukar nilai dalam "overflow-x: auto;"; kepada " overflow-x: overlay;" boleh membuat bar skrol tidak menduduki kedudukan.

See all articles