困难的CSS定位问题
|
我有一个CSS布局，如附图所示。
我想实现以下行为
当标题的一部分可见时，位置（滚动时）与图片中的位置相同。
当标题不可见时（我们向下滚动的次数大于标题长度），则应固定left，right和img的位置，并且唯一可滚动的部分应该是页面内容。
到目前为止，小提琴链接
利亚姆建议使用此链接，但javascript错误
Uncaught TypeError: Property \'$\' of object [object DOMWindow] is not a function .
没有找到相关结果
已邀请:
2 个回复
凸晴
<!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>屉杆绊