Question

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

Here is my page，您可以通过以下方式查看问题： 1.调整浏览器页面的大小向下滚动 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>

Answer 1

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

或者你可以利用盒子位置和宽度的百分比来使布局流畅。

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

或者您将流体宽度设置为左边距。

或者，或者......或者

Answer 2

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

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

Demo

两个分区固定在顶部

2 个答案: