Как закрепить вверху сайта меню

Тема в разделе "Другие языки", создана пользователем frosha, 7 окт 2012.

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

    frosha Постоялец

    Регистр.:
    9 окт 2007
    Сообщения:
    82
    Симпатии:
    4
    Как закрепить вверху сайта таблицу с несколькими ссылками? Что бы при скроллинге она всегда там и оставалась, как, например, здесь: http://www.russianexpeditions.net/

    Подскажите, плиз, какой код нужен.
     
  2. kaktyc1

    kaktyc1

    Регистр.:
    30 апр 2008
    Сообщения:
    576
    Симпатии:
    310
    Код:
    border-bottom-color: #FFFFFF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9998;
    вот, что прописано в стиле данного дива.
     
    AdreKh и frosha нравится это.
  3. frosha

    frosha Постоялец

    Регистр.:
    9 окт 2007
    Сообщения:
    82
    Симпатии:
    4
    Да, примерно так. Открыл для себя свойства div'ов

    Код:
      <style>
      .headertop {
        position: fixed; /* Абсолютное позиционирование */
        top: 0px; /* Положение от нижнего края */
        left: 0px; /* Положение от правого края */
        width: 100%;
      }
      </style>
     
    </head>
     
    <body>
     
    <!-- Закреплённая часть заголовка -->
    <div class="headertop">
    Вот только в explorer'е не работает, оказывается...

    Как заставить работать fixed в Эксплорере?? В интерете есть решения, но они почему-то не работают. У кого есть реальный опыт?
    -------------------------------------------------------------
    Нашёл решение для всех браузеров: https://www.nulled.cc/threads/184484/#post-1553073
     
  4. eleet3

    eleet3 Писатель

    Регистр.:
    21 июн 2011
    Сообщения:
    8
    Симпатии:
    2
    Код:
    <div id="fixed">Слой, который Fixed</div>
    
    затем CSS:
    Код:
    /* Для все браузеров */
    #fixed {
        position: fixed;
        top: 0px;
        left: 0px;
    }
    /* Для IE */
    *html body {
        background: url('null.gif') no-repeat;
        background-attachment: fixed;
    }
    *html #fixed {
        position: absolute;
        top: expression(document.getElementsByTagName(
        `body`)[0].scrollTop + "px");
    }
    
    у меня работает
     
    AdreKh и Cuker нравится это.
  5. Zloy HACKER

    Zloy HACKER Постоялец

    Заблокирован
    Регистр.:
    25 окт 2012
    Сообщения:
    133
    Симпатии:
    24
    Вот сокращенный код
    Код:
    border-bottom: 1px solid #426a94;
    width: 100%;
    top: 0;
    background: #648cb6;
    position: fixed;
    z-index: 9998;
    
     
    AdreKh нравится это.
  6. Dimik

    Dimik Создатель

    Регистр.:
    18 сен 2011
    Сообщения:
    21
    Симпатии:
    0
  7. Andry750

    Andry750 Создатель

    Регистр.:
    28 ноя 2012
    Сообщения:
    10
    Симпатии:
    0
    А как еще можно сделать, так что бы меню появлялось только при начале прокрутки, а если прокрутка возвращается обратно в верх то меню исчезало?
     
  8. Katsumoto

    Katsumoto Создатель

    Регистр.:
    10 июл 2012
    Сообщения:
    10
    Симпатии:
    3

    Слушайте событие скролл с помошью jQuery (http://api.jquery.com/scroll/). А позицию можно узнать при помощи $.scrollTop().
     
  9. Katsumoto

    Katsumoto Создатель

    Регистр.:
    10 июл 2012
    Сообщения:
    10
    Симпатии:
    3

    Слушайте событие скролл с помошью jQuery (http://api.jquery.com/scroll/). А позицию можно узнать при помощи $.scrollTop().
     
  10. donq

    donq Писатель

    Регистр.:
    26 апр 2013
    Сообщения:
    3
    Симпатии:
    0
    вот например решение

    border-bottom: 1px solid #426a94;
    width: 100%;
    top: 0;
    background: #648cb6;
    position: fixed;
    z-index: 9998;
     
Статус темы:
Закрыта.