两个 div 固定在顶部答案

【问题标题】：Two Divs fixed on top两个 div 固定在顶部
【发布时间】：2012-09-09 13:55:12
【问题描述】：

我对固定在页面顶部的 2 个 div 有疑问。我已将它们固定在顶部，如果我向下或向上滚动页面，一切正常。但如果我左右滚动，我看不到第二个 div。我该如何解决？

Here is my page，您可以通过以下方式查看问题： 1.调整浏览器页面大小 2.向下滚动 3. 向右滚动

代码如下：

 <HEAD>

<script type='text/javascript' src='jquery-1.7.1.js'></script>
</HEAD>
<LINK REL="stylesheet" HREF="Stile.css" TYPE="text/css" />
<BODY>
<script type='text/javascript'>
$(window).load(function(){
$(window).scroll(function () { 
    if(($(".container").position().top - $(window).scrollTop()) <= 0)
       {
           $("#cont").addClass("fixmenu");
       }
       else
       {
           $("#cont").removeClass("fixmenu");

       }
}); }); 
</script>

<div class="container" >

<div id="cont">

<div id="menubar">
</div>
<div id="fastlogin">
</div></div>

【问题讨论】：

不知道你的意思，在最新的 chrome 浏览器上看起来不错
如果您从左到右滚动，您的父级是固定的..........

标签： css html scroll fixed

【解决方案1】：

您可以为较小的屏幕宽度设置单独的样式表，以将右侧 div 定位在另一个位置。

或者您可以使用百分比来确定框的位置和宽度，以使布局流畅。

或者您可以使用right: #%; 来定位右框，而不是设置左边距。

或者你为左边距设置一个流体宽度。

或者，或者，或者……

【讨论】：

【解决方案2】：

仅y轴的固定位置，您可以通过这个小脚本来实现：

var topOffset = parseInt($("#header").css('top'));
$(window).scroll(function(){
    $('#header').css({
        'top': $(this).scrollTop() + topOffset
    });
});

Demo

【讨论】：