直接入题!
当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的。
好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下:
//侧栏随动
var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动
rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox"></div>'); var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),
rollSet = $('.search,.weibo,.group'); //添加rollStart之前的随动区块 objWindow.scroll(function() {
if (objWindow.scrollTop() > offset.top){
if(rollBox.html(null)){
rollSet.clone().prependTo('.da_rollbox');
}
rollOut.fadeOut();
rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);
} else {
rollOut.fadeIn();
rollBox.hide().stop().animate({marginTop:0},400);
}
});
码中已有完整注释,只需要写上几个class或者id(最好不要是id,w3c规定id不能重复使用)。
jQuery 随滚动条滚动效果 (适用于内容页长文章)的更多相关文章
-
jQuery 随滚动条滚动效果 (固定版)
//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...
-
jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
-
javascript实现 滚动条滚动 加载内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...
-
jQuery仿百度帖吧头部固定不随滚动条滚动效果
<style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...
-
jquery操作滚动条滚动到指定元素位置 scrollTop
$('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...
-
Jquery 文字上下滚动效果示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> ...
-
JQuery控制滚动条滚动到指定位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
jquery操作滚动条滚动到指定位置
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
随机推荐
-
如何利用Cron让django应用定期执行
最近用Django写了一个项目,但是有一个地方需要应用在后台自动定期执行检查,并存入数据库,如果单纯的写Python程序的话不能很好的跟django的结合在一起,写起来也和麻烦,查找资料的时候发现了d ...
-
jquery插件写法
//传统写法 //全局方法 ;(function($){ $.method = function(){ } //or $.obj = { method1:function(){}, method2:f ...
-
Windows Server 安装 BitLocker
打开PowerShell(管理员): C:\> Install-WindowsFeature BitLocker -Restart 安装好后,系统会自动重新启动. Windows Server ...
-
Codeforces 61E Enemy is weak 乞讨i&;lt;j&;lt;k &;amp;&;amp; a[i]&;gt;a[j]&;gt;a[k] 对数的 树阵
主题链接:点击打开链接 意大利正在寻求称号 i<j<k && a[i]>a[j]>a[k] 的对数 假设仅仅有2元组那就是求逆序数的做法 三元组的话就用一个树状 ...
-
Linux 环境下 Lua 安装(转)
系统环境:CentOS-6.2-x86_64. Lua 是嵌入式脚本语言,应用场景很广泛. 引自官网:Lua is used in many products and projects around ...
-
【Python3爬虫】常见反爬虫措施及解决办法(三)
上一篇博客的末尾说到全网代理IP的端口号是经过加密混淆的,而这一篇博客就将告诉你如何破解!如果觉得有用的话,不妨点个推荐哦~ 一.全网代理IP的JS混淆 首先进入全网代理IP,打开开发者工具,点击查看 ...
-
java~springboot~gradle里的docker集成
在springboot里,我们的task任务可以添加docker构建的功能,在gradle集成环境里,直接可以实现编译,测试,打包镜像的流水线作业,很是方便! 下面分享给大家,在gradle里添加do ...
-
P4180 严格次小生成树[BJWC2010] Kruskal,倍增
题目链接\(Click\) \(Here\). 题意就是要求一个图的严格次小生成树.以前被题面吓到了没敢做,写了一下发现并不难. 既然要考虑次小我们就先考虑最小.可以感性理解到一定有一种次小生成树,可 ...
-
oracle 闪回功能详解
Oracle的闪回技术提供了一组功能,可以访问过去某一时间的数据并从人为错误中恢复.闪回技术是Oracle 数据库独有的,支持任何级别的恢复,包括行.事务.表和数据库范围.使用闪回特性,您可以查询以前 ...
-
Chapter8(IO库) --C++Prime笔记
1.IO对象不能拷贝或对IO对象赋值,进行IO操作的函数通常是以引用方式传递和返回流. 2.一个流一旦发生错误,其上的后续的IO操作都会失败.代码通常应该在使用一个流之前检查它是否处于良好状态.确定一 ...