jQuery는 부동 사이드바 구현 아이디어와 code_jquery를 수정했습니다.

이 기능은 현재 매우 일반적으로 사용됩니다. 페이지가 상대적으로 높은 경우 스크롤 막대를 페이지 하단으로 드래그하면 브라우저 뒤의 사이드 바에 DIV 상자가 나타납니다. : 먼저 필요한 것을 얻습니다. 그런 다음 다음 DIV와 페이지 상단 사이의 거리를 결정합니다. 브라우저가 DIV 자체와 상단 사이의 거리보다 더 멀리 스크롤되면 고정 CSS 속성을 추가하기만 하면 됩니다.

코드는 다음과 같습니다

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>

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; }

자바스크립트 코드:

$(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');
}
});
});