Javascript CSS定位难题_Javascript_Css_Positioning_Onscroll

Javascript CSS定位难题

javascript css

Javascript CSS定位难题,javascript,css,positioning,onscroll,Javascript,Css,Positioning,Onscroll,我有一个CSS布局如所附图片。我希望实现以下行为当部分标题可见时，位置（滚动时）如图所示当标题不可见时（我们向下滚动超过标题长度），左、右和img的位置应该是固定的，唯一可滚动的部分应该是页面内容迄今为止的链接 Liam建议链接，但javascript有错误未捕获的TypeError:object[object DOMWindow]的属性“$”不是函数。可能与mootools有关（我没有使用它）。在没有Mootol的情况下是否可以实现此功能你能帮我介绍一下这个款式吗谢谢这应该会有

我有一个CSS布局如所附图片。
我希望实现以下行为

当部分标题可见时，位置（滚动时）如图所示

当标题不可见时（我们向下滚动超过标题长度），左、右和img的位置应该是固定的，唯一可滚动的部分应该是页面内容

迄今为止的链接

Liam建议链接，但javascript有错误

未捕获的TypeError:object[object DOMWindow]的属性“$”不是函数。

可能与mootools有关（我没有使用它）。在没有Mootol的情况下是否可以实现此功能

你能帮我介绍一下这个款式吗

谢谢

这应该会有帮助

除非你的屏幕真的很小，否则它应该可以正常工作。

测试过这个，效果很好

<!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>


//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'；
}
}
}
//]]>
/**/
标题
lkjlk
形象


























































































lkjlk
页脚

除非你发布一些有意义的代码，或者至少有一个fiddler链接，显示代码在做你所说的事情，否则没有人能帮你。到目前为止，你还需要添加HTML。@NGLN@Joel Etherton-code addedmake fiddle请用realdata@diEcho我还没有小提琴方面的经验。你能帮我做些简单的事情，然后把链接发送到这里，我会用我的代码来扩展它吗？这和我在第1点和第2点写的不一样。也许它需要一些Liam建议的javascript。是的，第1点只需要像javascript这样的东西，或者你必须使它移动，这样它就会使图像正好位于文本下方。也许放一些大的
会有助于把它放得更远，但我认为这不是你想要的。对于第2点，我真的不明白你说的是什么，但是你想让边栏像那样跟进并保持固定？Javascript更适合第2点。我想用img位置相对于左侧边栏位置（如果可能的话）来做第1点。放置一个相对位置将像

一样工作。这是可能的，但是当有太多的文本并且img持续下降时，您将不得不手动降低

top:000px@zzlawizz img是否可能始终位于左侧边栏下方5px？左侧边栏由于塌陷/扩展链接而改变其高度。它必须依赖于google API吗？如果有一天谷歌API不起作用怎么办？需要这些代码吗？不，它不依赖于谷歌库，你可以下载mootools库并在本地托管它，我只使用托管库来显示它的工作情况。您可以遍历库并删除冗余代码，我刚刚发布了一个快速示例。