0

Всем привет!

Проблема, вроде бы, достаточно стандартная, но никак не могу решить.

Есть сайдбар (шириной 200px), он прикреплен к верху экрана и находится слева (свойство left не задано). И все хорошо, до тех пор, пока щирина экрана >= ширине страницы. Как только страница не влезает в экран, появляется горизонтальная прокрутка. И если двигать ползунок в лево, менюшка налезает на контент.

Пара скриншотов:

В нормальном положении:

В нормальном положении

Прокрутили:

Прокрутили

Ближе к вечеру (если не решу проблему) залью на фиддл.

UPD: Ах, да, забыл сказать, из-за чего весь сыр-бор: я хочу обойтись без глобального изменения макета и, по возможности, без JS.

1
  • на то он и fixed.
    – zb'
    31 авг 2013 в 8:50

2 ответа 2

2

http://jsfiddle.net/alpha9000/dbTbh/

$(document).scroll(function() {
  k = $(this).scrollLeft();
  $('#nofix').css('left', -k);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nofix" style='position: fixed; left:0; width:200px;'>{menu}</div>
<div style='width:1000px; height:1000px; margin-left: 200px; border-left: 1px solid #777'>{content}</div>

1

Здравствуйте, а если сделать пробел там. Объясняю. Когда мы задаем position: fixed|absolute; Грубо говоря мы налаживаем слой. Тогда на первом слое сделаем блок пустой, чтобы занимал место. Вот пример как я вижу это:

<div style='float: left; width:200px;'> &nbsp;</div>
<div> {content} </div>
<div style='position: fixed; left:0; width:200px;'> {menu}</div>
1
  • Там есть пробел. Проблема в том, что при горизонтальном скроле меню выходит за этот пробел: jsfiddle.net/atSL9 — надпись «меню» налезает на «контент»
    – Zelta
    31 авг 2013 в 12:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.