jQuery(document).ready(function() {
var abovePos = 50;
var customMax = 1600;
var zIdx = 100;
var $bnr = $('#block');
var $win = $(window);
var $doc = $(document); $bnr.css('zIndex', zIdx); var offset = $bnr.offset();
var pos = $bnr.position();
var maxPos = customMax - abovePos; $win.scroll(function() {
var st = $doc.scrollTop();
var newPos = st - offset.top;
if (st > offset.top) {
if (st > maxPos) {
newPos = maxPos - offset.top;
}
$bnr.stop().animate({
top: pos.top + newPos + abovePos
});
} else {
$bnr.stop().animate({
top: pos.top
})
}
});
});

在线DEMO: http://output.jsbin.com/mogufewodu

jQuery banner 滑动的更多相关文章

  1. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  2. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  3. jquery左右滑动效果的实现

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

  4. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  5. 19个非常有用的 jQuery 图片滑动插件和教程

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

  6. 20 个非常棒的jQuery内容滑动插件

    Wow Slider  WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...

  7. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  9. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

随机推荐

  1. Qt入门(10)——调试技术

    命令行参数当你运行Qt程序时,你可以指定几个命令行参数来帮助你调试.-nograb 应用程序不再捕获鼠标或者键盘.当程序在Linux下运行在gdb调试器中时这个选项是默认的.-dograb 忽略任何隐 ...

  2. joelonsoftware 读书摘录

    joelonsoftware 读书摘录   <五个为什么>  1.“黑天鹅难题”,代表外来因素,是一个超出正常预料之外的事件.  2.丰田佐吉的“五个为什么”,当某个地方出现问题时,你就一 ...

  3. 【转】 Android的NDK开发(1)————Android JNI简介与调用流程

    原文网址:http://blog.csdn.net/conowen/article/details/7521340 ****************************************** ...

  4. 数学概念——A 几何概型

    You are going from Dhaka to Chittagong by train and you came to know one of your old friends is goin ...

  5. 动态规划——I 记忆化搜索

    Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  6. 第k大值01背包问题

    http://acm.hdu.edu.cn/showproblem.php?pid=2639 /* 第一行输入t 代表t组测试数据 第二行 输入物品个数 背包容量 要求的第k大值 物品的价值 物品的重 ...

  7. Sublime Text 学习资料

    Sublime Text 全程指南 Sublime Text 3 官方下载: http://www.sublimetext.com/3

  8. poj2287

    田忌赛马的题目- - 贪心策略: 1,如果田忌的最快马快于齐王的最快马,则两者比. (因为若是田忌的别的马很可能就赢不了了,所以两者比) 2,如果田忌的最快马慢于齐王的最快马,则用田忌的最慢马和齐王的 ...

  9. poj 2031 Building a Space Station【最小生成树prime】【模板题】

    Building a Space Station Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5699   Accepte ...

  10. linux —— 学习笔记(环境变量的设置)

    目录 环境变量概要 与环境变量相关的文件 设置环境变量 注意以及相关 1.环境变量概要 环境变量,简单来说,是储存了环境信息的变量.它可以让你在不指明全部路径的情况下执行某脚本或某应用程序,比如在 l ...