jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法


Posted in Javascript onAugust 08, 2015

本文实例讲述了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法。分享给大家供大家参考。具体如下:

本效果可实现左上角Logo的置顶但不滚动,而文字也就是网页主体区滚动,当用户拖动滚动条的时候可看到此效果,例子挺简单。

先看一下运行效果截图:

jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法

具体代码如下:

<!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("//img.jbzj.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="https://3water.com/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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
You might like
三个类概括PHP的五种设计模式
2012/09/05 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
深入浅析search 搜索框的写法
2016/08/02 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
js实现select下拉框选择
2020/01/11 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
python结合API实现即时天气信息
2016/01/19 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
详解python数据结构和算法
2019/04/18 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
解决方案设计综合面试题
2015/08/31 面试题
报纸媒体创意广告词
2014/03/17 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript