您好，我有一个基本的页面设置原型(prototype)，即页面右栏中的 float 篮子。
当用户滚动时篮子到达页面顶部时会发生什么，它会应用一个类，该类将其位置固定在屏幕顶部，直到用户再次滚动到屏幕顶部。
除一个问题外，这工作正常:
当您调整浏览器窗口的大小时，使视口(viewport)小于网页的宽度并向右水平滚动 - 如果您随后向下滚动页面，篮子会固定其位置，使其与网页的右侧重叠页!
我正在使用的代码如下，希望得到任何建议。提前致谢!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container{width: 900px; margin-left:auto; margin-right:auto;}
#header{height:40px; background-color:blue; }
#column1{float:left; width:600px; background-color:green; height:900px;}
#column2{float:left; width:300px; background-color:red; height:900px; position:relative;}
#basket{background-color:white; margin-left:10px; margin-right:10px; width:280px;}
.fixed{position:fixed; top:0;}
/*#scrollWrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/
#scrollWrapper{overflow:hidden;}
</style>
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
YUI().use('node', function(Y){
var basket = Y.one('#basket');
var basketY = basket.getY();
var overflow = Y.one('#scrollWrapper');
function constrain()
{
var basketHeight = basket.getComputedStyle("height").split("px")[0];
var windowHeight = Y.one("body").get("winHeight");
if (basketHeight > windowHeight) {
var diff = basketHeight - windowHeight;
var scrollHeight = Y.one("#scrollWrapper").getComputedStyle("height").split("px")[0];
var newHeight = scrollHeight - diff;
overflow.setStyle("height", newHeight+"px");
}
}
Y.on('scroll', function(e){
var windowY = Y.DOM.docScrollY();
//if(windowY > basketY && !basket.hasClass("fixed"))
if(windowY > basketY)
{
basket.addClass("fixed");
var height = Y.one("body").get("winHeight");
//basket.setStyle("height", height+"px");
constrain();
}
else if(windowY < basketY && basket.hasClass("fixed")){
basket.removeClass("fixed");
alert("removing");
}
});
});
/*window.onload = function(){
var basket = document.getElementById("basket");
alert(findPos(basket));
}
function findPos(obj)
{
var curTop = 0;
if(obj.offsetParent){
do {
curTop += obj.offsetTop;
}
while (obj.offsetParent);
}
return curTop;
}*/
</script>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="column1">
</div>
<div id="column2">
<div id="basket" class="">
hkjhkjkjhkjhkj
klklkl;kl;kl
<p>jhjkhkjhkj</p>
<div id="scrollWrapper">
<ul>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
这对你有用吗:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container{width: 900px; margin-left:auto; margin-right:auto;}
#header{height:40px; background-color:blue; }
#column1{float:left; width:600px; background-color:green; height:900px;}
#column2{float:left; width:300px; background-color:red; height:900px; position:relative;}
#basket{background-color:white; margin-top:10px; margin-left:10px; margin-right:10px; width:280px;}
.fixed{position:fixed; top:0; left:0; width:100%}
/*#scrollWrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/
#scrollWrapper{overflow:hidden;}
</style>
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
YUI().use('node', function(Y){
var basket = Y.one('#basket');
var basketY = basket.getY();
var basketCase = Y.one('#basketCase');
var basketHolder = Y.one('#basketHolder');
var overflow = Y.one('#scrollWrapper');
function constrain()
{
var basketHeight = basket.getComputedStyle("height").split("px")[0];
var windowHeight = Y.one("body").get("winHeight");
if (basketHeight > windowHeight) {
var diff = basketHeight - windowHeight;
var scrollHeight = Y.one("#scrollWrapper").getComputedStyle("height").split("px")[0];
var newHeight = scrollHeight - diff;
overflow.setStyle("height", newHeight+"px");
}
}
Y.on('scroll', fixBasket);
Y.on('resize', fixBasket);
function fixBasket(e){
var windowY = Y.DOM.docScrollY();
//if(windowY > basketY && !basket.hasClass("fixed"))
if(windowY > basketY)
{
basketCase.addClass("fixed");
basket.setStyle("marginLeft", 610 - document.body.scrollLeft + "px");
basketHolder.setStyle("width", "900px");
var height = Y.one("body").get("winHeight");
//basket.setStyle("height", height+"px");
constrain();
}
else if(windowY < basketY && basketCase.hasClass("fixed")){
basketCase.removeClass("fixed");
basket.setStyle("marginLeft", "10px");
basketHolder.setStyle("width", "auto");
//alert("removing");
}
}
});
/*window.onload = function(){
var basket = document.getElementById("basket");
alert(findPos(basket));
}
function findPos(obj)
{
var curTop = 0;
if(obj.offsetParent){
do {
curTop += obj.offsetTop;
}
while (obj.offsetParent);
}
return curTop;
}*/
</script>
</head>
<body style="margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;">
<div id="container">
<div id="header">
Header
</div>
<div id="column1">
</div>
<div id="column2">
<div id="basketCase">
<div id="basketHolder" style="margin: auto;">
<div id="basket" class="">
hkjhkjkjhkjhkj
klklkl;kl;kl
<p>jhjkhkjhkj</p>
<div id="scrollWrapper">
<ul>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
关于javascript - 职位固定问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4337695/