jquery 滚动条固定在某个位置详解

插件需求描述

该jQuery插件主要解决随着滚动条滚动固定某个div,鼠标滚动时浮动固定在顶部。当我们滚动网页浏览时,我们想将侧栏的某个广告或者精选文章固定在那里,这样用户滚动下来时侧栏就不是空白的,增加曝光率和点击率,增加收入和流量。
当然有时候设计网页时,侧栏也会用到一边是固定浮动在那里,一边是滚动的。这种情况我们也同样是可以用这个插件。

插件概述

作者:caibaojian

插件使用协议:GNU GENERAL PUBLIC LICENSE,个人和商业均可免费使用。

该插件大小为2K(压缩后),插件已经发布到github上了,你可以到项目主页下载源代码和演示代码,里面共有一个js文件和六种演示的代码。

github项目主页地址

如果你想直接下载js,可以使用这个scrollfix.js(未压缩2.77k),scrollfix-min.js(压缩后2k)。

打包下载scrollfix.zip(包含js和6个演示代码)http://file.111cn.net/upload/2013/11/scrollfix.zip

在线演示

 代码如下 复制代码

var fix = $(".fix"), fixtop = $(".fix-top"), fixStartTop = $(".fix-startTop"), fixStartBottom = $(".fix-startBottom"), fixbottom = $(".fix-bottom"), fixfooter = $(".fix-footer");

第一种:默认滚动到这里开始固定:fix.scrollFix();

第二种:滚动到距离这里顶部20像素开始固定:fixtop.scrollFix({distanceTop:20});

第三种:滚动到一个标签#startTop的头部开始固定:fixStartTop.scrollFix({startTop:"#startTop"});

第四种:滚动到一个标签#startBottom的末端开始固定:fixStartBottom.scrollFix({startBottom:"#startBottom"});

第五种:滚动停在底部300像素:fixbottom.scrollFix({endPos:300});

第六种:滚动停在底部#fixFooter的位置:fixfooter.scrollFix({endPos:"#fixFooter"});

参数详解

参数名字 参数值 参数作用
startTop null 开始固定的jquery对象的顶部
startBottom null 开始固定的jquery对象末端,两个参数都设置的话,默认后面参数生效
distanceTop 0/null 数值,距离顶部的高度,可以为高度或者jquery对象
endPos null/0 距离底部的高度,可以为高度或者jquery对象

如果你对这个插件有改进和意见,欢迎反馈给我,或者也可以在github在pull消息给我。非常感谢你的使用,scrollfix正在成长中。你的一点评论和转发都是对我们的支持。

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

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航固定</title>
<script src="/ajaxjs/jquery1.3.2.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){ 
  $(window).scroll(function() {
 //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
 if($(window).scrollTop()>=250){
  $(".nav").addClass("fixedNav");
 }else{
  $(".nav").removeClass("fixedNav");
 }
  });
});
</script>
<style>
*{
 margin:0px;
 padding:0px;
}
div.nav{
 background:#000000;
 height:57px;
 line-height:57px;
 color:#ffffff;
 text-align:center;
 font-family:"微软雅黑", "黑体";
 font-size:30px;
}

div.fixedNav{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 z-index:100000;
 _position:absolute;
 _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body>  
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

最后大家来下载源码吧:http://file.111cn.net/upload/2013/11/scrollfix.zip

时间: 2016-11-18

jquery 滚动条固定在某个位置详解的相关文章

jQuery原理系列-常用Dom操作详解_jquery

1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

jquery高级编程的最佳实践详解

 这篇文章主要介绍了jquery高级编程的最佳实践详解,学习JQ的朋友一定需要这个,参考下吧 加载jQuery   1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地址.    代码如下: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.mi

jQuery中getJSON跨域原理详解

jQuery中getJSON跨域原理详解  前几天我再开发一个叫 河蟹工具条 的时候,其中有个功能就是获取本页面的短网址. 这个想法是好的,可是在我付诸于行动的时候,发现这个需要跨域. 起初我的想法就是,跨域的最简单的方法就是增加一个script标签,因为script标签是允许跨域的. 但是问题又来了,对方的API返回的是个json对象,用script标签只能执行,却不能获取到里面的东西,也就是说返回的东西是不可控的. 随后我就想到了jQuery中的getJSON的方法,学习了一下,没想到里面的

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

jQuery中deferred对象使用方法详解_javascript技巧

在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数.同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象. 那就来看看deferred对象的用法.1.ajax的链式回调  // ajax方法返回的是一个deferred对象,可以直接使用链式写法 $.ajax('test.json').done(function(resp){ // done 相当于success回调,其中默认的参数为success回调的

jquery ajax局部加载方法详解(实现代码)_jquery

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

ASP.NET MVC中使用jQuery时的浏览器缓存问题详解_实用技巧

介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

JS定时器使用,定时定点,固定时刻,循环执行详解_javascript技巧

本文概述:本文主要介绍通过JS实现定时定点执行,在某一个固定时刻执行某个函数的方法.比如说在下一个整点执行,在每一个整点执行,每隔10分钟定时执行的方法. JavaScript中有两个定时器方法:setTimeout()和setInterval(). 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,或者函数名,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后