Вопрос по фиксированным слою

Тема в разделе "Верстка", создана пользователем Festem, 21 ноя 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Festem

    Festem Постоялец

    Регистр.:
    4 сен 2014
    Сообщения:
    97
    Симпатии:
    26
    Помогите с фиксированным слоем. Сделал клиенту сайт, где верхнее меню это div с атрибутом стиля position:fixed. В двух словах накидал в спойлере
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Перейти по ссылке">
    <html xmlns="Перейти по ссылке">
    <style>
    a.top {
    position: relative;
    top:-100px;
    display: block;
    height: 0;
    width:0;
    outline: medium none;
    }
    body {
    background-color: #CCCCCC;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    </style>
    <body>
    <div style="position:fixed; width:100%; border:2px solid #999999; top:0px; height:100px; background:white;">
    This covers the top 100px of the screen.<br />
    <a href="#post1">P1</a> <a href="#post2">P2</a> <a href="#post3">P3</a> <a href="#post4">P4</a> <a href="#post5">P5</a> <a href="#post6">P6</a></div>
    <div style="width:1100px">
    <div>
    <a name="post1" class="top"></a><h2>Foo1</h2>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    </p>
    </div>
    <div>
    <a name="post2" class="top"></a><h2>Bar2</h2>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, venonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    </p>
    </div>
    <div>
    <a name="post3" class="top"></a><h2>Bar3</h2>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero eros et accumsan et iusto odio dignissim qui blandit praesent
    luptatum zzril delenit aunonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua.
    </p>
    </div>
    <div>
    <a name="post4" class="top"></a><h2>Bart4</h2>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero eros et accumsan et iusnonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    </p>
    </div>
    <div>
    <a name="post5" class="top"></a><h2>Bar5</h2>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero eros et accumsan et iusto odio dignissim qui blandit praesent
    luptatum zzril delenit auguenonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    </p>
    </div>
    <div>
    <a name="post6" class="top"></a><h2>Bar6</h2>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero eros et accumsan et iusnonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    </p>
    </div>
    </body>
    </html>

    Суть вопроса вот в чем. Дизайн работает везде хорошо, кроме одного момента - масштабирование на планшете вызывает неудобство из-за того что срезается правая часть фиксированного блока. Пример этого можно увидеть если открыть браузер на пол окна.

    Можно ли как то прокручивать это блок по горизонтали вместе с контентом, но при этом оставлять на месте при вертикальном скроле?
     
  2. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    214
    Симпатии:
    310
    Festem нравится это.
  3. Festem

    Festem Постоялец

    Регистр.:
    4 сен 2014
    Сообщения:
    97
    Симпатии:
    26
    Перейти по ссылке
    Вот при прокрутке вниз надо чтоб блок оставался на месте, а при прокрутке вправо тоже прокручивался
     
    Последнее редактирование: 21 ноя 2014
  4. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    214
    Симпатии:
    310
    вам в подфорум js
     
  5. Festem

    Festem Постоялец

    Регистр.:
    4 сен 2014
    Сообщения:
    97
    Симпатии:
    26
    Не хотелось привязываться к ЯС. Неблагодарное это дело связывать его с версткой, но видимо другого варианта нету?
     
  6. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    214
    Симпатии:
    310
    насколько я смею предположить нет, создайте тему в js и следите за этой, может кто ответит чего путного
     
    Festem нравится это.
Статус темы:
Закрыта.