困难的CSS定位问题 [英] difficult CSS positioning problem
本文介绍了困难的CSS定位问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个CSS布局如附图所示。
我想实现以下行为
I have a CSS layout as in the attached picture.
I'd like to achieve the following behaviour
- 当标题的一部分可见时，位置（滚动时）如图所示。
- 当标题不可见时（我们向下滚动的长度大于标题长度），左，右和img的位置应该是固定的，只有可滚动的部分应该是页面内容。
到目前为止小提琴链接
Liam建议此链接，但javascript的错误 Uncaught TypeError：object [object DOMWindow]的属性'$'不是函数。也许它与mootools相关（我不使用它）。
Liam suggested this link but javascript has error Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function . Maybe it's related to the mootools (I'm not using it). Is this functionality possible without mootols?
谢谢
推荐答案
测试这个，工作正常
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js">
</script>
<script type="text/javascript">
//<![CDATA[
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 221 || self.pageYOffset > 221) {
$('rightsidebar').style.position = 'fixed';
$('rightsidebar').style.top = '0';
$('leftsidebar').style.position = 'fixed';
$('leftsidebar').style.top = '0';
} else if (document.documentElement.scrollTop < 221 || self.pageYOffset < 221) {
$('rightsidebar').style.position = 'absolute';
$('rightsidebar').style.top = '221px';
$('leftsidebar').style.position = 'absolute';
$('leftsidebar').style.top = '221px';
}
}
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
body {margin:0;
}
#header {background:blue; height:221px;}
#rightsidebar {
position:absolute;
right: 0;
top: 221px;
width: 150px;
color: #FFFFFF;
background:red;
}
#leftsidebar {
position:absolute;
left: 0;
top: 221px;
width: 150px;
color: #FFFFFF;
}
#topleft {background:green;}
#image {background:red;}
#footer {height:100px; background:yellow;}
/*]]>*/
</style>
<title></title>
</head>
<body>
<div id="header">header</div>
<div id="leftsidebar">
<div id="topleft">lkjlk</div>
<div id="image">IMAGE</div>
</div>
<div id="content"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<div id="rightsidebar">lkjlk</div>
<div id="footer">Footer</div>
</body>
</html>
这篇关于困难的CSS定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
