Закрепить блок на странице (игнорирующий scroll)

Тема в разделе "Другие языки", создана пользователем katrukhin, 25 июл 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    Сталкивался не раз с таким, видел решения, всегда было перед носом, когда было это не нужным.
    А вот как понадобилось найти не могу.

    Суть такая : Есть меню (шапка) не взирая на прокрутку страницы юзером, меню по прежнему будет находится на топе, когда body будет перемещаться.

    P.s.: Еще вот такой вопрос, если шапка отступает от верхнего края на 200пикселей, то при прокрутке она может отступ уменьшить до 0пикселей - Что то тип как в программе Перейти по ссылке


    меню скроллит до того момента, пока не подойдет к топу на 0 пикселей, затем цепляется.
     
  2. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    199
    Симпатии:
    55
    position: fixed;
    top: 0px;

    Прижмет к самому верху. А вообще при такой позиции координаты считаются по экрану, и не зависят ни от скролла ни от родителей
     
    katrukhin нравится это.
  3. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    Ясно, а есть скрипт которые сможет менять top от ситуации?
     
  4. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Вот полноценный fixed для всех браузеров.
    HTML:
    
    1px.gif - это прозрачная картинка. При использовании убирает дёрганье в IE при прокрутке, можно без картинки, но будет не плавно скальзить.
    
    <head>
    <style> 
    body{background: url('1px.gif') no-repeat fixed; 
    }
    .fixed { padding: 0; margin-top:10px; margin-left:10px;  
    position: fixed; top: 0px; left: 0px; // position: absolute; top: expression( eval(document.body.scrollTop) + "px");}
    </style>
    </head>
    
    <div class="fixed">
       [B]тут то, что нужно зафиксить[/B] 
    </div>
    Значения можно задать в процентах.

    Как видно в примере ScrollTop для всего документа, а можно и для конкретного блока посчитать.

    Код:
    document.getElementDyId('name_bloka').scrollTop(0)
    
     
    frosha и katrukhin нравится это.
  5. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    top: expression( eval(document.getElementDyId('name_bloka').scrollTop(0)) + "px");}

    т.е. вот так?

    П.с. Java в CSS - никогда не сталкивался...все верно?
     
  6. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Да, всё верно, просто скопируй пример и всё заработает, это готовый вариант. В действительности fixed не работает в IE, поэтому используем expression, который понимает только IE

    Я там ошибку исправил зч на px - PuntoSwitcher косянул


    Полный текст
    Перейти по ссылке
     
    katrukhin нравится это.
Статус темы:
Закрыта.