一个跟随滚动条滚动而固定的侧栏模块被认为是放广告位或者推广网站最理想的地方,本文就来详细说下这个效果应该怎么搞。首先声明:以下代码纯属个人瞎折腾,如有错漏欢迎指出。
这个效果需要用到JQ,所以一定要引入JQ库。
html代码:
<div class="fixed-location"></div> <div class="fixed-con"> 这里面是内容 随便放啥 </div>
上面这段html代码复制到你网站的侧栏代码里面去。
js代码:
var fixedbox = $(".fixed-con"),st; var fixedlocation = $(".fixed-location").offset().top; $(window).scroll(function () { st = Math.max(document.body.scrollTop || document.documentElement.scrollTop); if(st > fixedbox.offset().top){ fixedbox.addClass("fixedbox-on"); } if(st < fixedlocation){ fixedbox.removeClass("fixedbox-on"); } });
以上代码解释:先获取页面滚动时离页面顶部的高度;获取要固定div离页面顶部的距离,获取要用来定位的div离页面顶部的距离,当页面滚动到固定div的时候给它加上一个css属性。然后用添加的css属性来设置这个div固定住。
css代码:
.fixedbox-on{position: fixed;top: 0;z-index: 999;}
请注意,这个css里面没有设置宽度,当一个div设定了“position: fixed”的时候没有设定宽度会出问题,所以请务必根据你网站侧栏的宽度给上面的css里面加上一个宽度设定就行了。
相关推荐
- 一个输入框调用多个搜索引擎的js代码08-17
- JQ特效之:页面向上滚动时弹出模块06-09
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 2zblog判断插件是否安装或者启用的代码介绍01-16
- 3translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 4zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 5zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 6wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 7swiper做导航栏时自动跳转至对应分类的代码12-07
- 8zblogphp自带js框架评论接口大全12-04
- 9wordpress提示"Error establishing a database connection"的解决办法11-10
- 标签聚合
- ×1zblog字体大小×1飞信×1模板下载×1联通宽带×1服务指南×13G国际长途优惠包×1恢复模式×1朋友圈×1视频×1话务包×1A60刷机×1度娘×1营业网点×1商旅套餐×1一排两个×1bxSlider参数×1三四线城市×1什么是T×1zblog模板开发×1宽屏主题
最新评论
-
中加达移民
个人买过这个网站的主题,可以付责任的说,主题很好好用。另外我不是托! -
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样 -
天兴工作室
这玩意你看下php手册啊https://www.php.net/manual/zh/function.date.php,m就是星期几