cari
Rumahhujung hadapan webtutorial js博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)_javascript技巧

当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站。

现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法,摘录之以供参考。

参考一、提高浏览量的特效:侧栏跟随滚动条

来源:卢松松博客
http://lusongsong.com/reed/453.html

代码如下:

CSS部分:

复制代码 代码如下:

/*侧栏跟随*/  
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注:每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:250px;,把这段代码添加到你的CSS文件中即可。

JS部分:

JavaScript代码

复制代码 代码如下:

//侧栏跟随   
(function(){   
    var oDiv=document.getElementById("float");   
    var H=0,iE6;   
    var Y=oDiv;   
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};   
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;   
    if(!iE6){   
        window.onscroll=function()   
        {   
            var s=document.body.scrollTop||document.documentElement.scrollTop;   
            if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}   
            else{oDiv.className="div1";}       
        };   
    }   
})();  

注:这段代码可放入任意JS文件中,比如我放在了util.js 文件里。

网页代码部分:

复制代码 代码如下:

  
    
这里写你网站的代码与标签   
  
  

注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。

特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。

参考二、添加侧边栏随滚动条滚动效果(示例)

来源:自由的风博客(http://loosky.net/?p=2028)

步骤如下:

1、给侧边栏的各个模块加上一些class标志
如果你的侧边栏之前已经有了这些class标志加以区分,只要使用就可以了,不用另外加。添加ID也可以实现效果,但w3c标准不允许同一页面出现多个同样的ID,所以最好用class样式方式。

2、在网站页面中的任意js文件中加上如下代码:

JavaScript代码

复制代码 代码如下:

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动   
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块   
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块   

rollStart.before('
');   
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();   
objWindow.scroll(function() {   
if (objWindow.scrollTop() > offset.top){   
if(rollBox.html(null)){   
rollSet.clone().prependTo('.rollbox');   
}   
rollOut.fadeOut();   
rollBox.show().stop().animate({top:0,paddingTop:10},400);   
} else {   
rollOut.fadeIn();   
rollBox.hide().stop().animate({top:0},400);   
}   
});  

注:滚动区域的内容不能太长,不然会出现无限下拉的情况。

参考三、JQUERY SCROLL FOLLOW

这是一个插件,添加步骤也很简单,下载压缩包解压到网站目录,然后按照步骤操作即可。
详细可参考:
http://kitchen.net-perspective.com/open-source/scroll-follow/

示例页面:
http://kitchen.net-perspective.com/sf-example-1.html
http://kitchen.net-perspective.com/sf-example-2.html
http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html

侧栏模块随窗口滑动(示例页面)
来源:http://www.mb-wx.com/common/msay.js
这段代码来自木本无心的博客(pjblog),原理很简单,就是当窗口到达指定模块位置后,开始判断其距离顶端的距离并进行调整。该段代码结合应用在了志文工作室博客侧边栏。

JavaScript代码

复制代码 代码如下:

//侧栏模块随窗口滑动   
jQuery(document).ready(function($) {   
 $(function() {   
  var $sidebar = $("#Side_relativelog"),   
  $window = $(window),   
  offset = $sidebar.offset(),   
  topPadding = 0;   
  $window.scroll(function() {   
   if ($window.scrollTop() > offset.top) {   
    $sidebar.stop().animate({   
     marginTop: $window.scrollTop() - offset.top + topPadding   
    });   
   } else {   
    $sidebar.stop().animate({   
     marginTop: 0   
    });   
   }   
  });   
 });   
}); 
Kenyataan
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
Adakah JavaScript ditulis dalam C? Memeriksa buktiAdakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AM

Ya, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.

Peranan JavaScript: Membuat Web Interaktif dan DinamikPeranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AM

JavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.

C dan JavaScript: Sambungan dijelaskanC dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AM

C dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptDari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanPython vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AM

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.

Peranan C/C dalam JavaScript Jurubah dan PenyusunPeranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AM

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

JavaScript in Action: Contoh dan projek dunia nyataJavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

JavaScript dan Web: Fungsi teras dan kes penggunaanJavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

See all articles

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

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft