jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2019/6/29 22:25:18
本文主要是介绍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("//files.zyiz.net/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="//www.zyiz.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实现指定内容滚动同时左侧或其它地方不滚动的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-03-06jquery对css样式（jquery中的css方法）-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax，sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器，bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习
