這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/
所以需要處理scroll物件
<div id="menuContainer">
<div id="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
<div> ...長內容.... </div>
</div>
js
var __ContainerHeight = 5000;
var __ContainerTop = 160;
var __MenuHeight = 550;
var __FixedTop = 20;
$(window).load(function () {
__ContainerHeight = $("#menuContainer").height();
__ContainerTop = $("#menuContainer").offset().top;
__MenuHeight = $("#menu").height();
$("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });
$(window).scroll(function () {
var scrolls = $(this).scrollTop();
//console.log(scrolls);
if (scrolls < __ContainerTop) {
$("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });
}
else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {
$("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });
}
else {
$("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });
}
});
});