如何使固定位置菜單旁邊的內容在較小的分辨率下不重疊

Question

我正在嘗試弄清楚如何做到這一點，如果用戶的瀏覽器窗口小於1024px（網站沒有以1024px +的水平滾動），並且用戶確實向右滾動以查看更多主要內容，不會被左側的固定位置菜單重疊/混亂。

我做了一個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，在我的實時版本中，不得不將某些頂級菜單元素的位置從固定更改為絕對。 謝謝大家！謝謝！

Answer 1

不確定您的特定需求，但是可以從.content規則中刪除width:700px ，以便該元素將像視口一樣縮小。

演示在 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/

Answer 2

根據屏幕/視口的寬度更改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 。

Answer 3

不確定是否正是您想要/需要的，但是您也可以使用id =“ positioner”為div使用絕對定位。 只需將您的margin-left：250px替換為

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

我對小提琴做了一些修改。 您可以在這里找到新版本

Answer 4

您可以使用浮點數執行此操作。 如果希望容器（#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;
}

Answer 5

現在，我知道您想要的是一個非常簡單的修復程序。 只需將positioner器包裝器設為絕對，並設置其標記並告訴其滾動即可。

 #positioner {
     position: absolute;
     top: 0px;
     left: 250px;
     right: 0px;
     bottom: 0px;
     overflow: auto;
 }

Answer 6

首先，您必須了解固定位置的工作原理。 它是相對於屏幕視口的位置，並且在滾動時不會移動。

以下解決方案相對地設置了左框的樣式，但使其表現為固定的。

將以下內容添加到您的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/>