jQuery 随滚动条滚动效果 (适用于内容页长文章)
直接入题!
当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的。
好吧,昨天写了这个东西,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" ...
随机推荐
- override和new的区别
override 1. override是派生类用来重写基类中方法的: 2. override不能重写非虚方法和静态方法: 3. override只能重写用virtual.abstract.overr ...
- USACO 1.4 ariprog 解题报告
这是继虫洞之后又让我为难的一个 剪枝题目,无论如何,做的再快,也只能过6个点,最后三个点也TLE.后来参考了一下标答,大概思路是这样的. 朴素算法就不多说了,枚举a,b然后判断就行,网上说这样优化到位 ...
- vs2012配置opencv及简单测试
为visual studio2012搭建openCV平台,实现打开图片. 实现步骤: 1.1.配置环境变量 基于win7操作系统的环境配置步骤: 1.1.1 计算机—>属性—>更改设置—& ...
- 《C++ Primer Plus 6th》读书笔记 - 第十一章 使用类
1. 运算符重载 2. 计算时间:一个运算符重载示例 3. 友元 1. 友元有三种: 友元函数 友元类 友元成员函数 4. 重载运算符:作为成员函数还是非成员函数 5. 再谈重载:一个矢量类 6. 类 ...
- windows 文件watch nodejs
本篇博客,主要是记录下最近一直纠结的gulp.watch方法,在工作中我们肯定都遇到过,新添加的文件没办法自动触发watch,下面我们就来看有什么办法处理 1.首先我们肯定是先百度一下 百度推荐的是g ...
- express框架目录结构
. ├── app.js ├── bin │ └── www ├── node_modules │ ├── body-parser │ ├── cookie-parser │ ├── ...
- git基础命令
git pull 更新git status 查看文件状态git add .添加所有git commit -a -m "xxxx" 提交git push 推送至服务器git dif ...
- C++ 包含头文件 和 宏的使用 和 条件编译
1 #define命令剖析 1.1 #define的概念 #define命令是C语言中的一个宏定义命令,它用来将一个标识符定义为一个字符串,该标识符被称为宏名,被定义的字符串称为替换文本. ...
- 类加载器子系统——JVM之四
一.类加载器基本概念 顾名思义,类加载器(class loader)用来加载 Java 类到 Java 虚拟机中.一般来说,Java 虚拟机使用 Java 类的方式如下:Java 源程序(.java ...
- 如何重载浏览器 onload 事件后加载的资源文件
http://www.oschina.net/translate/reloading-post-onload-resources?lang=eng 怎么在webview中加载本地jquery.mi.j ...