jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
本文实例讲述了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法。分享给大家供大家参考。具体如下：
本效果可实现左上角Logo的置顶但不滚动，而文字也就是网页主体区滚动，当用户拖动滚动条的时候可看到此效果，例子挺简单。
先看一下运行效果截图：
具体代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery跟随滚动的侧边条效果</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display: block;}
body{line-height: 1;}
ol, ul{list-style: none;}
blockquote, q{quotes: none;}
blockquote: before, blockquote: after,
q: before, q: after{content: '';content: none;}
table{border-collapse: collapse;border-spacing: 0;}
a{text-decoration: none;}
body{background: url("http://zsrimg.ikafan.com/file_images/article/201508/201588101650294.jpg") repeat scroll 0 0 transparent;font: 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;}
p{line-height: 24px;margin: 0 0 15px 0;color: #fff;}
.header{color: #FFFFFF;font-size: 15em;height: 150px;letter-spacing: -10px;margin: 20px auto;clear: both;text-align: center;font-family: Georgia, "Times New Roman", Times, serif;}
.italic{font-style: italic;}
#sticky{margin-top: 50px;margin-left: 50px;padding: 5px;background: rgba(255,255,255,1);height: 120px;width: 305px;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;}
#sticky: hover{background: #6c6c6c;background: rgba(54,54,54,0.80);}
.sticky_text{color: #ffffff;text-align: center;font-size: 16px;line-height: 20px;padding-top: 10px;}
#text, h1{color: #fff;margin: 0 auto;font-size: 1.2em;line-height: 23px;width: 500px;}
h1,h2{font-weight: bold;line-height: 50px;}
a{color: #e3e3e3;}
a: hover{color: #ccc;}
#container{width: 744px;}
.menu{float: left;}
.button{-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;box-shadow: inset 0px 1px 0px 0px #ffffff;background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');background-color: #ededed;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;border: 1px solid #dcdcdc;display: inline-block;color: #777777;font-family: arial;font-size: 15px;font-weight: bold;padding: 6px 24px;text-decoration: none;text-shadow: 1px 1px 0px #ffffff;cursor: pointer;margin-top: 10px;}
.button: hover{background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #cfcfc) );background: -moz-linear-gradient( center top, #ededed 5%, #cfcfcf 100% );filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#cfcfcf');background-color: #ededed;border: 1px solid #bbbbbb;}
.button: active{background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');background-color: #dfdfdf;}
#download{margin-top: 50px;width: 400px;height: 100px;font-size: 72px;line-height: 100px;margin-right: 100px;margin-bottom: 50px;text-align: center;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var obj = $('#sticky');
var offset = obj.offset();
var topOffset = offset.top;
var leftOffset = offset.left;
var marginTop = obj.css("marginTop");
var marginLeft = obj.css("marginLeft");
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= topOffset){
obj.css({
marginTop: 0,
marginLeft: leftOffset,
position: 'fixed',
});
}
if (scrollTop < topOffset){
obj.css({
marginTop: marginTop,
marginLeft: marginLeft,
position: 'relative',
});
}
});
});
</script>
</head>
<body>
<div id="sticky">
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon"></div>
<img src="http://www.jb51.net/images/logo.gif"/>
</div>
</div>
</div>
<div id="text">
<div class="header">d<span class="italic">w</span></div>
<h1>Tutorial: Creating A Sticky Sidebar Using jQuery</h1>
<p>DesignWoop welcomes this guest post by <a href="#">Alexandre Smirnov</a> a web designer and developer who lives and works in Cal-i-for-nia.</p>
<h2><strong>Read the tutorial:</strong> <a href="#">Creating A Sticky Sidebar Using jQuery</a></h2>
<p>Mattis parturient mus platea integer ut cursus diam turpis a scelerisque sit, scelerisque! Mauris, ac pellentesque velit purus cras porttitor ut vel arcu, augue mauris! Etiam placerat turpis etiam amet augue velit? Dis odio ridiculus, lundium nec tempor platea, phasellus sagittis! Mattis. Ac nisi! Scelerisque, facilisis elit nascetur, mid parturient vut? Turpis aenean, placerat. Velit placerat mid in turpis, ut hac et turpis odio ac rhoncus elementum tortor turpis, eu habitasse nunc mattis ac dapibus habitasse integer duis tortor duis tortor aliquam, amet ultrices, nunc. Aliquam aliquam. Aliquet penatibus, nec elit pulvinar ridiculus, ut arcu, lacus natoque magnis tempor in et enim amet, lorem. Urna tristique placerat! Rhoncus amet tincidunt integer. Dapibus facilisis sit cum, diam vut, odio pulvinar.</p>
<p>Ac mid ultrices. Adipiscing, sit risus diam! Diam in, porttitor magna nisi urna, turpis rhoncus turpis et, cras a, ac et diam scelerisque eros habitasse! Nisi, massa placerat elementum, sit ac, placerat, purus. Augue enim etiam tincidunt lundium vut! Cras, magna, pulvinar turpis nisi sagittis! Mus facilisis ultrices massa? Velit a adipiscing ridiculus, cras odio nec et adipiscing ut? Aenean dis in augue magna, facilisis, natoque dapibus. Nisi duis, eu auctor et natoque phasellus in enim magna integer hac, sed massa ut? A? Diam tincidunt egestas a. Mattis massa, augue mus. Dolor tortor auctor tincidunt, porttitor nisi placerat nascetur. Eu risus tortor in, risus tincidunt elementum pulvinar. Penatibus a penatibus, a porttitor odio tristique in mattis in, amet ut.</p>
<p>Mattis parturient mus platea integer ut cursus diam turpis a scelerisque sit, scelerisque! Mauris, ac pellentesque velit purus cras porttitor ut vel arcu, augue mauris! Etiam placerat turpis etiam amet augue velit? Dis odio ridiculus, lundium nec tempor platea, phasellus sagittis! Mattis. Ac nisi! Scelerisque, facilisis elit nascetur, mid parturient vut? Turpis aenean, placerat. Velit placerat mid in turpis, ut hac et turpis odio ac rhoncus elementum tortor turpis, eu habitasse nunc mattis ac dapibus habitasse integer duis tortor duis tortor aliquam, amet ultrices, nunc. Aliquam aliquam. Aliquet penatibus, nec elit pulvinar ridiculus, ut arcu, lacus natoque magnis tempor in et enim amet, lorem. Urna tristique placerat! Rhoncus amet tincidunt integer. Dapibus facilisis sit cum, diam vut, odio pulvinar.</p>
<p>Elementum ultricies duis porttitor, nec rhoncus placerat hac aenean turpis ultricies? Urna. Placerat. Porttitor est lacus sit mus. Turpis, vel a natoque odio sagittis, in, non pellentesque lorem cum penatibus, porta et! Eros. Nascetur eu. Amet. Magnis tristique in, pellentesque odio quis parturient integer urna. Rhoncus aliquam parturient, ut massa, proin augue rhoncus augue. Aliquam aenean, sed, tortor, elementum aliquet nec. Enim lorem porta! Sagittis, aliquam, aenean auctor porta adipiscing. Penatibus penatibus, nascetur, sed amet, magna, a in? Massa cras, arcu odio tortor ultrices? Lectus duis ut turpis rhoncus montes lacus egestas? Arcu nisi scelerisque lundium! Pid, natoque in, in eros porta, in dis nascetur magnis auctor proin, sit habitasse. Sit, dapibus nunc ac pulvinar nisi phasellus hac purus, lacus.</p>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
相关推荐
-
Jquery实现侧边栏跟随滚动条固定（兼容IE6）
部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop
-
jQuery实现类似老虎机滚动抽奖效果
本文实例讲述了jQuery实现类似老虎机滚动抽奖效果.分享给大家供大家参考.具体如下: 这里使用jquery实现类似老虎机的网页抽奖功能,只是一个简单的投资功能实现,还有一些地方是需要完善的,比如抽奖快结束的时候,不会自动变慢速度,哪位高手感兴趣的话可以加以完善. 实现效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
jQuery插件windowScroll实现单屏滚动特效
回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也不得不向前走. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间.希望大家能多提意见与建议. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-
-
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>
-
jquery简单实现滚动条下拉DIV固定在头部不动
复制代码 代码如下: <!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=&qu
-
jQuery实现平滑滚动页面到指定锚点链接的方法
本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法.分享给大家供大家参考.具体如下: $.fn.scroller = function() { var speed = 'slow'; // Choose default speed $(this).each(function() { $(this).bind('click', function() { var target = $(this).attr('href'); // Get scroll target $(target).S
-
jquery滚动特效集锦
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果. 一.单行滚动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo
-
基于jquery的滚动条滚动固定div(附演示下载)
例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果,现在流行这个么?元芳,你怎么看?我也在网上找了找代码,屡试不爽啊,很多代码乱且没用.于是乎,我自己写一个,代码非常之简单,只有10几行,但遗憾的是,不兼容IE6,如果谁有兼容IE6的例子,还请指教. 直接贴下代码吧. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo
-
jquery实现仿新浪微博评论滚动效果
本文实例讲述了jquery实现仿新浪微博评论滚动效果.分享给大家供大家参考.具体如下: 这里使用jquery实现评论滚动效果,仿新浪微博大厅文字滚动效果,以前有不少人膜拜的效果,现在被模仿的到处都是啦,呵呵,今天这个仍是模仿的,评论和头像一起向下滚动,最新的一条带渐变淡入淡出,无缝循环向下滚动,觉得不错的就顶下. 点击此处预览效果: http://demo.jb51.net/js/2015/jquery-sina-scroll-pl-codes/ 运行效果如下图所示: 具体代码如下: <!DOC
-
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
本文实例讲述了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法.分享给大家供大家参考.具体如下: 本效果可实现左上角Logo的置顶但不滚动,而文字也就是网页主体区滚动,当用户拖动滚动条的时候可看到此效果,例子挺简单. 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu
-
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE
-
jQuery 同时获取多个标签的指定内容并储存为数组
在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况. 当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦. 比如 id=problem1的demo var list1=$("#problem1").children();//获取到problem1指定的对象数组 console.log(list1);//打印到控制台 控制台中输出的跟我们想象中的是一样的.那么接下来看下一段代码 var list1=$("#problem1").child
-
jQuery实现列表内容的动态载入特效
采用Jquery实现的列表数据动态更新效果,更新的数据可以是ajax请求的数据. CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; line-height: 40px; padding-left: 5px; } .item:hover { background-color: #efefef; } .item:n
-
jQuery对指定元素中指定字符串进行替换的方法
本文实例讲述了jQuery对指定元素中指定字符串进行替换的方法.分享给大家供大家参考.具体如下: 这段JS代码可以将指定id的元素内容的字符串进行替换,例如西面的代码将id=content元素中的jb51字符串替换成空字符 html部分如下: <div id=content>welcome to jb51</div> jQuery部分如下: var el = $('#content'); el.html(el.html().replace(/jb51/ig, '')); 希望本文所
-
利用jquery给指定的table动态添加一行、删除一行的方法
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,
-
jQuery实现指定区域外单击关闭指定层的方法【经典】
本文实例讲述了jQuery实现指定区域外单击关闭指定层的方法.分享给大家供大家参考,具体如下: 在页面上指定区域外单击,关闭层.常见效果为弹出层外单击,关闭弹出层.今天遇到一个这样的效果,用jQuery实现起来挺简单的,顺便复习了一下相关知识. $(document).mouseup(function(e){ if($(e.target).parent("#big_map").length==0){ $("#big_map").hide("fast&quo
-
jQuery判断指定id的对象是否存在的方法
jQuery判断指定id的对象是否存在,只需要判断对象的length是否大于0即可. 示例: 正确的判断写法如下: if($("#object_id").length>0) { alert('对象存在'); } else { alert('对象不存在'); } 或者直接使用原生的 Javascript 代码来判断: if(document.getElementById("id")) { alert('对象存在'); } else { alert('对象不存在'
-
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery
-
jQuery实现滚动到底部时自动加载更多的方法示例
本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/