Rumah > Artikel > hujung hadapan web > Kaedah jQuery untuk melaksanakan penatalan kandungan tertentu tanpa menatal di sebelah kiri atau tempat_jquery lain

Kaedah jQuery untuk melaksanakan penatalan kandungan tertentu tanpa menatal di sebelah kiri atau tempat_jquery lain

WBOYasal: 2016-05-16 15:46:201176semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan penatalan kandungan tertentu tanpa menatal di sebelah kiri atau tempat lain. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan ini dapat menyedari bahawa logo di sudut kiri atas berada di atas tetapi tidak menatal, dan teks ditatal di kawasan utama halaman web Kesan ini boleh dilihat apabila pengguna menyeret tatal bar.

Mula-mula lihat tangkapan skrin kesan berjalan:

Kod khusus adalah seperti berikut:

<!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://files.jb51.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="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&#63; Dis odio ridiculus, lundium nec tempor platea, phasellus sagittis! Mattis. Ac nisi! Scelerisque, facilisis elit nascetur, mid parturient vut&#63; 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&#63; Velit a adipiscing ridiculus, cras odio nec et adipiscing ut&#63; Aenean dis in augue magna, facilisis, natoque dapibus. Nisi duis, eu auctor et natoque phasellus in enim magna integer hac, sed massa ut&#63; A&#63; 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&#63; Dis odio ridiculus, lundium nec tempor platea, phasellus sagittis! Mattis. Ac nisi! Scelerisque, facilisis elit nascetur, mid parturient vut&#63; 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&#63; 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&#63; Massa cras, arcu odio tortor ultrices&#63; Lectus duis ut turpis rhoncus montes lacus egestas&#63; 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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery melaksanakan effect_jquery navigasi tetap kepala Baidu TiebaArtikel seterusnya：jQuery melaksanakan effect_jquery navigasi tetap kepala Baidu Tieba

Artikel berkaitan

Lihat lagi