jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

2016-02-19 15:59 5 1 收藏

下面图老师小编要向大家介绍下jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

代码如下:
!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
titlejquery.text-effects/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style
*{
margin:0;
padding:0;
}
#test{
position:absolute;
top:10px;
right:10px;
width:130px;
height:60px;
background:#555;
color:#fff;
font-size:13px;
}
/style
script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/script
script language="javascript"
$(document).ready(function(){
var menuYloc = $("#test").offset().top;
$(window).scroll(function (){
var offsetTop = menuYloc + $(window).scrollTop() +"px";
$("#test").animate({top : offsetTop },{ duration:600 , queue:false });
});
});
/script
/head
body
h17行代码的跟随屏幕滚动层./h1
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
div id="test"Dev By CssRain.cnbr/Test ie6+,firefox3.0/div
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
/body
/html

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1610843.html

延伸阅读
标签: Web开发
jQuery锚点跳转滚动条平滑滚动一句话代码 代码如下: $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧 1. 控制编译结果 代码如下: script type="text/javascript" src="scripts/jquery-1.2.6.min.js"/script %if (false) { % script type="text/javascript" src="scripts/jquery-1.3...
标签: Web开发
代码如下: (function($){ $.fn.extend({ rollList:function(option){ option=$.extend({ direction:"up", step:1, time:23 },option); var step_coe,scroll_coe,score_coe; if(option.direction=="up") { step_coe=1; scroll_coe=1; score_coe=1; }else { step_coe=-1; scroll_coe=-1; score_coe=0; } return this.each(...
标签: Web开发
其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但...
标签: Web开发
一些css的定义,可以根据需要自己选择。 //显示单双行显示不同背景色: // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色: $("#UL_id li:even").addClass("redClass"); ul id="UL_id" li单数/li li双数/li li双数/li /ul odd:单 even:双 jQuery 表格隔行变色代码 li隔行换色改进版 JS控制表格隔...
标签: Web开发
html headtitle层滚动条DIY - Powered by yexj00/title style !-- *{ font-size: 12px} -- /style script language="Javascript" !-- function $(obj){ return document.all[obj]; } function setbarHeight(){ $("scroll_bar").style.height=($("scroll_content").clientHeight)/($("scroll_content&q...

经验教程

970

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部