jQuery 随滚动条滚动效果(固定长度/随动区块)

上代码(基于jQuery):

//侧栏随动

 代码如下 复制代码

var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动
 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块

rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
 if (objWindow.scrollTop() > offset.top){
  if(rollBox.html(null)){
   rollSet.clone().prependTo('.da_rollbox');
  }
  rollBox.show().stop().animate({top:0,paddingTop:15},400);
 } else {
  rollBox.hide().stop().animate({top:0},400);
 }
});

比上个更简单了,请留意注释的地方,是需要根据你的需求添加模块class或者id的。值得注意的是第五行的背景色,默认是白色!

Tips:IE6的粉丝可以加些不支持fixed的代码,这部分浩子不加说明了,你懂的!

当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的。

好吧,昨天写了这个东西,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不能重复使用)。

时间: 2024-10-27 14:31:50

jQuery 随滚动条滚动效果(固定长度/随动区块)的相关文章

jQuery 随滚动条滚动效果代码

jQuery 随滚动条滚动效果 (固定版) 代码(基于jQuery):  代码如下 复制代码 //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动  rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position

jquery跟随屏幕滚动效果的实现代码_jquery

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc

图片-js 鼠标按住内容实现滚动内容 实现滚动条滚动效果

问题描述 js 鼠标按住内容实现滚动内容 实现滚动条滚动效果 就是不用右边的滚动条,,然后里面的vvvvvvv文字鼠标按住后,拖动它可以上下滚动,达到滚动条效果.. 解决方案 mousedown后添加mousemove事件,判断鼠标y轴移动方向,设置容器scrollTop就可以滚动了..不过你要禁止选择内容,要不选中内容不太好看.. <style> .noselect{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*we

基于jquery图片左右滚动效果源码

基于jquery图片左右滚动效果源码 这是一款来自网络的图片可控的左右滚动效果源码,有需要的朋友可以参考一下. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>slide</title> <script type="text/网页特效" src="http://ajax.googleapis.com/ajax

滚动图片效果 jquery实现回旋滚动效果_jquery

今天在网上找到一款回旋滚动效果,拿出来和大家一起分享.先上效果图:  html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css"> *{pad

jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)_jquery

一.jQuery.roll 插件使用说明 jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字.图片水平垂直滚动,该函数使用方法为: 复制代码 代码如下: /* * @module jQuery roll * @param: contentCls 内容容器className * @param: contentParentId 内容容器父元素节点ID * @param: configs 配置参数 * * @config: effect 滚动效果 * @config: duration

简单实用的jquery 图片左右滚动效果

先看幻灯片效果图片 代码如下  代码如下 复制代码 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单实用的图片左右滚动效果</title> <script src="jquery-1.6.4.min.js" type="text/javascript"></scri

利用jquery的滚动条滚动固定div

 js & jquery <script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var loaded = true; var top = $("#demo").offset().to

基于jquery的滚动条滚动固定div(附演示下载)_jquery

例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果,现在流行这个么?元芳,你怎么看?我也在网上找了找代码,屡试不爽啊,很多代码乱且没用.于是乎,我自己写一个,代码非常之简单,只有10几行,但遗憾的是,不兼容IE6,如果谁有兼容IE6的例子,还请指教. 直接贴下代码吧. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo