jQuery 随滚动条滚动效果 (适用于内容页长文章)

时间:2021-10-19 00:50:06

直接入题!

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

好吧,昨天写了这个东西,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 随滚动条滚动效果 (适用于内容页长文章)的更多相关文章

  1. jQuery 随滚动条滚动效果 (固定版)

    //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...

  2. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  3. javascript实现 滚动条滚动 加载内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动

    一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...

  5. jQuery仿百度帖吧头部固定不随滚动条滚动效果

    <style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...

  6. jquery操作滚动条滚动到指定元素位置 scrollTop

    $('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...

  7. Jquery 文字上下滚动效果示例代码

      <!doctype html>   <html>   <head>   <meta charset="utf-8">       ...

  8. JQuery控制滚动条滚动到指定位置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery操作滚动条滚动到指定位置

    <html><head><script type="text/javascript" src="/jquery/jquery.js&quot ...

随机推荐

  1. 如何利用Cron让django应用定期执行

    最近用Django写了一个项目,但是有一个地方需要应用在后台自动定期执行检查,并存入数据库,如果单纯的写Python程序的话不能很好的跟django的结合在一起,写起来也和麻烦,查找资料的时候发现了d ...

  2. jquery插件写法

    //传统写法 //全局方法 ;(function($){ $.method = function(){ } //or $.obj = { method1:function(){}, method2:f ...

  3. Windows Server 安装 BitLocker

    打开PowerShell(管理员): C:\> Install-WindowsFeature BitLocker -Restart 安装好后,系统会自动重新启动. Windows Server ...

  4. Codeforces 61E Enemy is weak 乞讨i&amp&semi;lt&semi;j&amp&semi;lt&semi;k &amp&semi;amp&semi;&amp&semi;amp&semi; a&lbrack;i&rsqb;&amp&semi;gt&semi;a&lbrack;j&rsqb;&amp&semi;gt&semi;a&lbrack;k&rsqb; 对数的 树阵

    主题链接:点击打开链接 意大利正在寻求称号 i<j<k && a[i]>a[j]>a[k] 的对数 假设仅仅有2元组那就是求逆序数的做法 三元组的话就用一个树状 ...

  5. Linux 环境下 Lua 安装&lpar;转&rpar;

    系统环境:CentOS-6.2-x86_64. Lua 是嵌入式脚本语言,应用场景很广泛. 引自官网:Lua is used in many products and projects around ...

  6. 【Python3爬虫】常见反爬虫措施及解决办法(三)

    上一篇博客的末尾说到全网代理IP的端口号是经过加密混淆的,而这一篇博客就将告诉你如何破解!如果觉得有用的话,不妨点个推荐哦~ 一.全网代理IP的JS混淆 首先进入全网代理IP,打开开发者工具,点击查看 ...

  7. java~springboot~gradle里的docker集成

    在springboot里,我们的task任务可以添加docker构建的功能,在gradle集成环境里,直接可以实现编译,测试,打包镜像的流水线作业,很是方便! 下面分享给大家,在gradle里添加do ...

  8. P4180 严格次小生成树&lbrack;BJWC2010&rsqb; Kruskal,倍增

    题目链接\(Click\) \(Here\). 题意就是要求一个图的严格次小生成树.以前被题面吓到了没敢做,写了一下发现并不难. 既然要考虑次小我们就先考虑最小.可以感性理解到一定有一种次小生成树,可 ...

  9. oracle 闪回功能详解

    Oracle的闪回技术提供了一组功能,可以访问过去某一时间的数据并从人为错误中恢复.闪回技术是Oracle 数据库独有的,支持任何级别的恢复,包括行.事务.表和数据库范围.使用闪回特性,您可以查询以前 ...

  10. Chapter8&lpar;IO库&rpar; --C&plus;&plus;Prime笔记

    1.IO对象不能拷贝或对IO对象赋值,进行IO操作的函数通常是以引用方式传递和返回流. 2.一个流一旦发生错误,其上的后续的IO操作都会失败.代码通常应该在使用一个流之前检查它是否处于良好状态.确定一 ...