站长资源 网页制作

利用HTML5 Canvas API绘制矩形的超级攻略

整理:jimmy2024/10/5浏览2次

简介使用closePath()闭合图形首先我们用最普通的方法绘制一个矩形。JavaScript Code复制内容到剪贴板 </titl</div> <div class="news_infos"><div id="MyContent"><p><strong>使用closePath()闭合图形<br></strong>首先我们用最普通的方法绘制一个矩形。<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li><!DOCTYPE html> </li> <li><html lang="en"> </li> <li><head> </li> <li> <meta charset="UTF-8"> </li> <li> <title></title> </li> <li></head> </li> <li><body> </li> <li><!DOCTYPE html> </li> <li><html lang="zh"> </li> <li><head> </li> <li> <meta charset="UTF-8"> </li> <li> <title>绘制矩形</title> </li> <li></head> </li> <li><body> </li> <li><div id="canvas-warp"> </li> <li> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> </li> <li> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </li> <li> </canvas> </li> <li></div> </li> <li> </li> <li><script> </li> <li> window.onload = function(){ </li> <li> var canvas = document.getElementById("canvas"); </li> <li> canvas.width = 800; </li> <li> canvas.height = 600; </li> <li> var context = canvas.getContext("2d"); </li> <li> </li> <li> context.beginPath(); </li> <li> context.moveTo(150,50); </li> <li> context.lineTo(650,50); </li> <li> context.lineTo(650,550); </li> <li> context.lineTo(150,550); </li> <li> context.lineTo(150,50); //绘制最后一笔使图像闭合 </li> <li> context.lineWidth = 5; </li> <li> context.strokeStyle = "black"; </li> <li> context.stroke(); </li> <li> </li> <li> } </li> <li></script> </li> <li></body> </li> <li></html> </li> <li></body> </li> <li></html> </li> </ol> <p>运行结果：<br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105129852.jpg?2016221105141');"><img src="/UploadFiles/2021-03-30/2016321105129852.jpg?2016221105141" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？<br>标题已经剧透了，使用clothPath()闭合图形。<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li><!DOCTYPE html> </li> <li><html lang="zh"> </li> <li><head> </li> <li> <meta charset="UTF-8"> </li> <li> <title>绘制矩形</title> </li> <li></head> </li> <li><body> </li> <li><div id="canvas-warp"> </li> <li> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> </li> <li> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </li> <li> </canvas> </li> <li></div> </li> <li> </li> <li><script> </li> <li> window.onload = function(){ </li> <li> var canvas = document.getElementById("canvas"); </li> <li> canvas.width = 800; </li> <li> canvas.height = 600; </li> <li> var context = canvas.getContext("2d"); </li> <li> </li> <li> context.beginPath(); </li> <li> context.moveTo(150,50); </li> <li> context.lineTo(650,50); </li> <li> context.lineTo(650,550); </li> <li> context.lineTo(150,550); </li> <li> context.lineTo(150,50); //最后一笔可以不画 </li> <li> context.closePath(); //使用closePath()闭合图形 </li> <li> </li> <li> context.lineWidth = 5; </li> <li> context.strokeStyle = "black"; </li> <li> context.stroke(); </li> <li> </li> <li> } </li> <li></script> </li> <li></body> </li> <li></html> </li> <li></body> </li> <li></html> </li> </ol> <p>运行结果：<br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105204703.jpg?2016221105221');"><img src="/UploadFiles/2021-03-30/2016321105204703.jpg?2016221105221" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>这个例子结合上节课的讲解，我们知道了绘制路径的时候需要将规划的路径使用beginPath()与closePath()包裹起来。当然，最后一笔可以不画出来，直接使用closePath()，它会自动帮你闭合的。(所以如果你不想绘制闭合图形就不可以使用closePath())<br><strong></strong></p> <p><strong>给矩形上色<br></strong>这里我们要介绍一个和stroke()同等重要的方法fill()。和当初描边一样，我们在填色之前，也要先用fillStyle属性选择要填充的颜色。<br>比如我们要给上面的矩形涂上黄色，可以这样写。<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li><!DOCTYPE html> </li> <li><html lang="zh"> </li> <li><head> </li> <li> <meta charset="UTF-8"> </li> <li> <title>绘制矩形</title> </li> <li></head> </li> <li><body> </li> <li><div id="canvas-warp"> </li> <li> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> </li> <li> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </li> <li> </canvas> </li> <li></div> </li> <li> </li> <li><script> </li> <li> window.onload = function(){ </li> <li> var canvas = document.getElementById("canvas"); </li> <li> canvas.width = 800; </li> <li> canvas.height = 600; </li> <li> var context = canvas.getContext("2d"); </li> <li> </li> <li> context.beginPath(); </li> <li> context.moveTo(150,50); </li> <li> context.lineTo(650,50); </li> <li> context.lineTo(650,550); </li> <li> context.lineTo(150,550); </li> <li> context.lineTo(150,50); //最后一笔可以不画 </li> <li> context.closePath(); //使用closePath()闭合图形 </li> <li> </li> <li> context.fillStyle = "yellow"; //选择油漆桶的颜色 </li> <li> context.lineWidth = 5; </li> <li> context.strokeStyle = "black"; </li> <li> </li> <li> context.fill(); //确定填充 </li> <li> context.stroke(); </li> <li> </li> <li> } </li> <li></script> </li> <li></body> </li> <li></html> </li> <li></body> </li> <li></html> </li> <li> </li> </ol> <p>运行结果：<br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105516457.jpg?2016221105526');"><img src="/UploadFiles/2021-03-30/2016321105516457.jpg?2016221105526" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制，只有调用了stroke()和fill()才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将状态设置与确定绘制的代码分隔开。增强代码的可读性。</p> <p><br><strong>封装绘制方法<br></strong>大家一定发现了，绘制矩形其实都是这样的四笔，我们每次用这种笨方法画矩形都要画这四笔有多麻烦，如果我们要花10个矩形？100个？1000个？都这样写，代码会臃肿，复用性很低。这里，我们可以使用JavaScript封装这些方法。我们知道，一个矩形可以由它的左上角坐标和其长宽唯一确定。<br>JavaScript函数<br>这里我们介绍一下JavaScript函数。如果有基础的同学可以跳过这一大段，直接看后面的。<br>JavaScript 和 ActionScript 语言的函数声明调用一样，都是编程语言中最简单的。<br>函数的作用<br>函数的作用，可以写一次代码，然后反复地重用这个代码。如:我们要完成多组数和的功能。<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>var sum; </li> <li>sum = 3+2; </li> <li>alert(sum); </li> <li> </li> <li>sum=7+8 ; </li> <li>alert(sum); </li> <li> </li> <li>.... //不停重复两行代码 </li> <li> </li> </ol> <p>如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。<br>使用函数完成:<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>function add2(a,b){ </li> <li> sum = a + b; </li> <li> alert(sum); </li> <li>} // 只需写一次就可以 </li> <li> </li> <li>add2(3,2); </li> <li>add2(7,8); </li> <li>.... //只需调用函数就可以 </li> <li> </li> </ol> <p>定义函数<br>如何定义一个函数呢？看看下面的格式：<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>function 函数名( ) </li> <li>{ </li> <li> 函数体; </li> <li>} </li> </ol> <p>function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。<br>函数调用<br>函数定义好后，是不能自动执行的，需要调用它，直接在需要的位置写函数名。一般有两种方式：</p> <p>第一种情况：在<script>标签内调用。</p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li><script> </li> <li>function tcon() </li> <li>{ </li> <li> alert("恭喜你学会函数调用了!"); </li> <li>} </li> <li>tcon(); //调用函数，直接写函数名。 </li> <li></script> </li> </ol> <p>第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数。</p> <p>这种情况以后用到了再说。<br>有参数的函数<br>格式如下：<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>function 函数名(参数1,参数2) </li> <li>{ </li> <li> 函数代码 </li> <li>} </li> </ol> <p>注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。<br>按照这个格式，函数实现任意两个数的和应该写成：<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>function add2(x,y) </li> <li>{ </li> <li> sum = x + y; </li> <li> document.write(sum); </li> <li>} </li> </ol> <p>x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。<br>例如，add2(3，4)会求3+4的和，add2(60,20)则会求出60和20的和。<br>返回值函数<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>function add2(x,y) </li> <li>{ </li> <li> sum = x + y; </li> <li> return sum; //返回函数值,return后面的值叫做返回值。 </li> <li>} </li> </ol> <p>这里的return和其他语言中的一样，但是在JS或者AS等弱类型语言中，返回值类型是不需要写到函数声明里的。</p> <p>至此，我们把JavaScript函数也顺便系统的说了一下。下面回到正题~<br>我们也可以封装一下我们的矩形，代码如下：<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li><!DOCTYPE html> </li> <li><html lang="zh"> </li> <li><head> </li> <li> <meta charset="UTF-8"> </li> <li> <title>封装绘制矩形方法</title> </li> <li></head> </li> <li><body> </li> <li><div id="canvas-warp"> </li> <li> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> </li> <li> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </li> <li> </canvas> </li> <li></div> </li> <li> </li> <li><script> </li> <li> window.onload = function(){ </li> <li> var canvas = document.getElementById("canvas"); </li> <li> canvas.width = 800; </li> <li> canvas.height = 600; </li> <li> var context = canvas.getContext("2d"); </li> <li> </li> <li> drawRect(context, 150, 50, 50, 50, "red", 5, "blue"); </li> <li> drawRect(context, 250, 50, 50, 50, "green", 5, "red"); </li> <li> drawRect(context, 350, 50, 50, 50, "yellow", 5, "black"); </li> <li> } </li> <li> </li> <li> function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){ </li> <li> cxt.beginPath(); </li> <li> cxt.moveTo(x, y); </li> <li> cxt.lineTo(x + width, y); </li> <li> cxt.lineTo(x + width, y + height); </li> <li> cxt.lineTo(x, y + height); </li> <li> cxt.lineTo(x, y); </li> <li> cxt.closePath(); </li> <li> </li> <li> cxt.lineWidth = borderWidth; </li> <li> cxt.strokeStyle = borderColor; </li> <li> cxt.fillStyle = fillColor; </li> <li> </li> <li> cxt.fill(); </li> <li> cxt.stroke(); </li> <li> } </li> <li></script> </li> <li></body> </li> <li></html> </li> <li></body> </li> <li></html> </li> </ol> <p>运行结果：<br><strong><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105735875.jpg?2016221105748');"><img src="/UploadFiles/2021-03-30/2016321105735875.jpg?2016221105748" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></strong></p> <p><strong>使用rect()方法绘制矩形<br></strong>犹豫绘制矩形是常用的方法，所以在Canvas API中已经帮我们封装好了一个绘制矩形的方法——rect()。这个方法接收4个参数x, y, width, height，实际调用时也就是<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>context.rect(x,y,width,height); </li> </ol> <p>基于此，我们帮刚才封装的方法优化一下。<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){ </li> <li> cxt.beginPath(); </li> <li> cxt.rect(x, y, width, height); </li> <li> //cxt.closePath(); 可以不用closePath() </li> <li> </li> <li> cxt.lineWidth = borderWidth; </li> <li> cxt.strokeStyle = borderColor; </li> <li> cxt.fillStyle = fillColor; </li> <li> </li> <li> cxt.fill(); </li> <li> cxt.stroke(); </li> <li>} </li> </ol> <p><strong>调用封装方法，绘制魔性图像<br></strong>来个有魔性的图像~<br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105759647.jpg?201622110589');"><img src="/UploadFiles/2021-03-30/2016321105759647.jpg?201622110589" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>好，我们就拿它开刀，练练手，给咱刚封装好的方法活动活动筋骨。<br></p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li><!DOCTYPE html> </li> <li><html lang="zh"> </li> <li><head> </li> <li> <meta charset="UTF-8"> </li> <li> <title>绘制魔性图形</title> </li> <li></head> </li> <li><body> </li> <li><div id="canvas-warp"> </li> <li> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> </li> <li> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </li> <li> </canvas> </li> <li></div> </li> <li> </li> <li><script> </li> <li> window.onload = function(){ </li> <li> var canvas = document.getElementById("canvas"); </li> <li> canvas.width = 800; </li> <li> canvas.height = 600; </li> <li> var context = canvas.getContext("2d"); </li> <li> </li> <li> context.beginPath(); </li> <li> context.rect(0, 0, 800, 600); </li> <li> context.fillStyle = "#AA9033"; </li> <li> </li> <li> context.fill(); </li> <li> </li> <li> context.beginPath(); </li> <li> for(var i=0; i<=20; i++){ </li> <li> drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i); </li> <li> drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i); </li> <li> } </li> <li> </li> <li> context.beginPath(); </li> <li> context.rect(395, 295, 5, 5); </li> <li> context.fillStyle = "black"; </li> <li> context.lineWidth = 5; </li> <li> </li> <li> context.fill(); </li> <li> context.stroke(); </li> <li> } </li> <li> </li> <li> function drawBlackRect(cxt, x, y, width, height){ </li> <li> cxt.beginPath(); </li> <li> cxt.rect(x, y, width, height); </li> <li> </li> <li> cxt.lineWidth = 5; </li> <li> cxt.strokeStyle = "black"; </li> <li> </li> <li> cxt.stroke(); </li> <li> } </li> <li> </li> <li> function drawWhiteRect(cxt, x, y, width, height){ </li> <li> cxt.beginPath(); </li> <li> cxt.rect(x, y, width, height); </li> <li> </li> <li> cxt.lineWidth = 5; </li> <li> cxt.strokeStyle = "white"; </li> <li> </li> <li> cxt.stroke(); </li> <li> } </li> <li></script> </li> <li></body> </li> <li></html> </li> <li></body> </li> <li></html> </li> </ol> <p>运行结果：<br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105841741.jpg?2016221105850');"><img src="/UploadFiles/2021-03-30/2016321105841741.jpg?2016221105850" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——closePath()、fillStyle、fill()、rect()，还有一个扩展的JavaScript函数讲解。</p> <p><strong>Canvas实现图片圆角效果<br></strong>本规则适用于各种Canvas绘制的规则或不规则图形。</p> <p>Canvas实现图片圆角的关键是使用“纹理填充”。</p> <p>Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。</p> <p>举个板栗，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则主要JS代码如下：</p> JavaScript Code复制内容到剪贴板 <ol class="dp-c"> <li>// canvas元素, 图片元素 </li> <li>var canvas = document.querySelector("#canvas"), image = new Image(); </li> <li>var context = canvas.getContext("2d"); </li> <li> </li> <li>image.onload = function() { </li> <li> // 创建图片纹理 </li> <li> var pattern = context.createPattern(image, "no-repeat"); </li> <li> // 绘制一个圆 </li> <li> context.arc(50, 50, 50, 0, 2 * Math.PI); </li> <li> // 填充绘制的圆 </li> <li> context.fillStyle = pattern; </li> <li> context.fill(); </li> <li>}; </li> <li>image.src = "test.jpg"; </li> </ol> <p>让Canvas上下文的fillStyle属性值等于这个纹理对象就可以了。</p> <p>Canvas自带的矩形绘制API是不带圆角属性的，因此，demo中的圆角矩形使用了自定义方法。我简单瞅了瞅，要实现垂直、水平方向不同圆角大小略折腾，本着示意的目的，就没大动干戈，所以demo的圆角是对称的。<br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016321105911393.png?2016221105925');"><img src="/UploadFiles/2021-03-30/2016321105911393.png?2016221105925" alt="利用HTML5 Canvas API绘制矩形的超级攻略" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="http://m.paidiu.com/show/1/69248.html" title="使用HTML5 Canvas为图片填充颜色和纹理的教程">使用HTML5 Canvas为图片填充颜色和纹理的教程</a></p> <p>下一篇：<a href="http://m.paidiu.com/show/1/69250.html" title="HTML5 画布canvas使用方法">HTML5 画布canvas使用方法</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/show/1/615856.html" title="何洛洛.2024-别叫醒我（EP）【光羽】【FLAC">何洛洛.2024-别叫醒我（EP）【光羽】【FLAC</a></li> <li><a href="/show/1/615855.html" title="林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE">林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE</a></li> <li><a href="/show/1/615854.html" title="黄妃.2005-红【亚律】【WAV+CUE】">黄妃.2005-红【亚律】【WAV+CUE】</a></li> <li><a href="/show/1/615853.html" title="刘美麟《同生》[FLAC/分轨][161.95MB]">刘美麟《同生》[FLAC/分轨][161.95MB]</a></li> <li><a href="/show/1/615852.html" title="群星《前途海量电影原声专辑》[320K/MP3">群星《前途海量电影原声专辑》[320K/MP3</a></li> <li><a href="/show/1/615851.html" title="群星《前途海量电影原声专辑》[FLAC/分轨">群星《前途海量电影原声专辑》[FLAC/分轨</a></li> <li><a href="/show/1/615850.html" title="张信哲.1992-知道新曲与精丫巨石】【WAV+">张信哲.1992-知道新曲与精丫巨石】【WAV+</a></li> <li><a href="/show/1/615849.html" title="王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】">王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】</a></li> <li><a href="/show/1/615848.html" title="景冈山.1996-我的眼里只有你【大地唱片】">景冈山.1996-我的眼里只有你【大地唱片】</a></li> <li><a href="/show/1/615847.html" title="群星《八戒电影原声带》[320K/MP3][188.">群星《八戒电影原声带》[320K/MP3][188.</a></li> </ul> </div> </div> <div class="sidebar"> <div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/show/1/603302.html"><ul>微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键<br><br>几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。<br>在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。</ul></a></div> </div> </article> <footer> <p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p> <p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p> </footer> <script src="/images/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>