WordPress侧面栏实用工具飘浮追随导轨滑块实际效

2021-03-28 23:50| 发布者: | 查看: |

加上js编码

先上编码,把下列编码加到主题风格的全局性载入的.js文档中,留意:你的主题风格必须完成载入好jQuery库(实际上如今每一个主题风格都应当载入了JQ 不啰嗦了)

//sidebar scroll
jQuery(document).ready(function($) {
 if (!isie6()) {
 var rollStart = $('#rollstart'),
 rollSet = $('.widget,#widget-populars'); 
 /*---------------------------------------------------------------------------------
 上边这方面就是指拖动的版面是class为widget和ID为widget-populars的器皿內容。必须自身改
 一般状况下,侧面栏的class全是.widget,因此大家必须界定一个必须拖动的导轨滑块ID就可以。
 -----------------------------------------------------------------------------------*/
 rollStart.before(' div /div 
 var offset = rollStart.offset(),
 objWindow = $(window),
 rollBox = rollStart.prev();
 if (objWindow.width() 960) {
 objWindow.scroll(function() {
 if (objWindow.scrollTop() offset.top) {
 (null)) {
 rollSet.clone().prependTo('.seavia_rollbox')
 rollBox.show().stop().animate({
 top: 0,
 paddingTop: 15
 400)
 } else {
 rollBox.hide().stop().animate({
 top: 0
 400)
 function isie6() {
 if ($.browser.msie) {
 if ($.browser.version == "6.0") return true;
 return false;
加上导轨滑块和css设定

编码的第四行的“#rollstart”就是指从这一ID为rollstart的器皿刚开始拖动,例如我将下边的编码放到边栏的尾部,拖动版面便会从尾部刚开始拖动。在主题风格的siderbar.php中,必须加上导轨滑块的部位添加下列编码:

 div id="rollstart" /div 

随后设定一下css款式就可以,在style.css里加入下列:

.seavia_rollbox {position:fixed;background:none;width:275px;}

总宽width给你的主题风格侧面栏的宽,择人而异,不知道道总宽核查原素一点便可以看到哦~
之上。

好文章!共享朋友,或是点个赞吧~

归类:WordPress 标识:jQuery, js, wordpress, wordpress清理 著作权:文中能够引入,但请保存连接: WordPress侧面栏实用工具飘浮追随导轨滑块实际效果
远方的海面神
超級efly

假如有侵害著作权的資源请尽早联络网站站长,大家会在24h内删掉有异议的資源。


有关远方的海

远方的海网站站长为Sven。本网站关心互连网网络热点,各种各样建网站資源,完全免费資源和WordPress建网站技术性及其前端开发设计方案;同时还出示一些给国外中国人的小Tips。假如您也是个IT喜好者,对WordPress和有关建网站实例教程很感兴趣,热烈欢迎个人收藏或根据RSS、电子邮箱定阅本网站!


远方的海 · 2014 - 2018 · 保存一切支配权 · 雅致地应用Wildfire主题风格 · 此次载入同用 0.554 秒 · 进行了 57 次恳求

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部