jQuery tetapkan idea pelaksanaan bar sisi terapung dan code_jquery

Fungsi ini kini sangat biasa digunakan Jika halaman agak tinggi, apabila bar skrol diseret ke bahagian bawah halaman, kotak DIV akan muncul di bar sisi yang mengikuti pelayar : mula-mula dapatkan yang diperlukan Jarak antara DIV berikut dan bahagian atas halaman ditentukan Apabila jarak tatal penyemak imbas lebih besar daripada jarak antara DIV itu sendiri dan bahagian atas, cuma tambahkan atribut CSS yang ditetapkan.

Kod adalah seperti berikut

Kod HTML:

<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>

Kod CSS:

body {
margin: 10px auto;
font-family: sans-serif;
width: 500px;
}
div {
border-radius: 5px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
border: 1px solid #ccc;
padding: 5px;
}
#sidebarWrap {
height: 400px;
width: 210px;
float: right;
position: relative;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
#main {
width: 270px;
height: 4000px;
}
#footer {
clear: both;
margin: 10px 0;
}
#sidebar {
width: 200px;
height: 300px;
position: absolute;
}
#header {
height: 200px;
margin-bottom: 10px;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer { height: 600px; }
#footer { height: 600px; }

Kod JavaScript:

$(function() {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

var maxY = footTop - $('#sidebar').outerHeight();

$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#sidebar').addClass('fixed').removeAttr('style');
} else {
$('#sidebar').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('fixed');
}
});
});