1

我试图弄清楚如何做到这一点，所以如果用户的浏览器窗口低于大约 1024 像素（该网站在 1024 像素以上没有水平滚动），如果他们确实向右滚动以查看更多主要内容，那么它不会被左侧固定位置菜单重叠/弄乱。

我制作了一个 JS 小提琴，重现了我面临的基本问题：http: //jsfiddle.net/YE7ZZ/1/

CSS

#wrap {
    width:100%;
    background-image:url('../images/Imagine/bg_image44.png');
    background-attachment:fixed;
} 

#top {

}

#left {
    position:fixed;
    border:1px solid red;
    background:pink;
    width:250px;
}
#positioner {
    margin-left:250px;
    width:auto;
}
#content {
    border:1px solid green;
    width:700px;
    margin:auto;
        background:grey;

}

HTML

    <div id="wrap">
    <div id="top"></div>
    <div id="left">menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br /></div>
    <div id="positioner">
        <div id="content">asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</div>

在过去六周的过程中，我已尝试解决此问题大约三个不同的时间，但未能找到解决方案，因此非常感谢任何帮助。

感谢您的时间。

编辑——我理想的解决方案是为内容部分显示一个水平滚动条，以便他们可以滚动浏览内容本身，而不必：1）重叠左侧菜单；或 2) 切断可见内容的数量；或 3) 减小左侧菜单的大小

已解决：非常感谢@Gaby aka G. Petrioli

我使用了这个 javascript 解决方案：

$(document).ready(function(){
var lastLeft = -1,
    menu = $('.left_, .top_');

$(window).on('scroll resize', function(){
    var left = $(window).scrollLeft();
    if (left >= 0 && left!==lastLeft){
        lastLeft = left;
        menu.css('left',-left+'px');
    }
});

});

并按照他的概述更改了 CSS，在我的实时版本中，必须将一些顶部菜单元素的定位从固定更改为绝对。谢谢大家！谢谢！

4

6 回答 6

1

不确定您的具体需求，但您可以width:700px从.content规则中删除 ，这样该元素就会像视口一样缩小..

演示在 http://jsfiddle.net/YE7ZZ/2/

另一方面，如果您需要维护布局，并且希望fixed仅适用于垂直滚动，则必须使用一些 jquery（纯 CSS 不可能）

var lastLeft = -1,
    menu = $('#left');
$(window).on('scroll resize', function(){
    var left = $(window).scrollLeft();
    if (left >= 0 && left!==lastLeft){
        lastLeft = left;
        menu.css('left',-left+'px');
    }
});

演示在 http://jsfiddle.net/YE7ZZ/3/

于 2013-10-07T17:11:56.513 回答
0

首先，您必须了解固定位置的工作原理。它是相对于屏幕视口的位置，滚动时不会移动。

以下解决方案相对设置您的左框样式，但使其行为固定。

将以下内容添加到您的 CSS 中：

#wrapp {
  min-width: 955px;
}
#left {
  position: relative;
  float: left;
  width: 250px;
  top: 0;
}
#positioner {
  position: relative;
  float: left;
  margin-left: 0;
}

使用此 Javascript 程序将左侧菜单保持在顶部：

<script>
function scrollTop() { return document.body.scrollTop || document.documentElement.scrollTop; }

$( document ).ready(function() {
    $(window).scroll(function() {    
        $("#left").css({ top: scrollTop() + 'px' });
    });    
});
<script/>
于 2013-10-07T18:15:13.863 回答
0

不确定它是否正是您想要/需要的，但您也可以对 id="positioner" 的 div 使用绝对定位。只需将您的 margin-left:250px 替换为

position: absolute;
left: 250px;
right: 0;
overflow: auto;

我修改了一点小提琴。你可以在这里找到新版本

于 2013-10-07T17:09:39.417 回答
0

你可以用花车做到这一点。如果您希望容器 (#wrap) 提升高度，您可能需要使用 clearfix。

这里有一个小提琴：http: //jsfiddle.net/EqXBp/

CSS：

#left {
    float: left;
    border:1px solid red;
    background:pink;
    width:250px;
}

#content {
    border:1px solid green;
    float: right;
    width: calc(100% - 4px);
    margin:auto;
    background:grey;
}
于 2013-10-07T17:10:26.533 回答
0

根据屏幕/视口的宽度更改 CSS。

将此添加到您的脑海中：

<meta name="viewport" content="initial-scale=1">

根据大小更改您的 css 规则：

@media screen and (min-width : ###px) and (max-width : ###px) {
   .your-css-here{
   }
}

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

在此过程中，您可以更改固定导航菜单以不同方式显示。

IE：

@media screen and (max-width : 1024px) {
   nav{
      position:relative;
      etc...:...;
   }
 }

编辑---有max/min-device-width。需要max/min-width。

于 2013-10-07T17:08:16.203 回答
0

现在我明白你想要什么，这是一个非常简单的修复。只需要让你的positioner包装器绝对并设置它的标记并告诉它滚动。

 #positioner {
     position: absolute;
     top: 0px;
     left: 250px;
     right: 0px;
     bottom: 0px;
     overflow: auto;
 }
于 2013-10-07T17:20:02.610 回答