Плавающая панель как у одноклассников

Тема в разделе "Верстка", создана пользователем cocs, 18 май 2013.

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

    cocs

    Регистр.:
    5 дек 2009
    Сообщения:
    433
    Симпатии:
    107
    Хочу на сайте сделать панель как у одноклассников, что бы при скролинге панель подымалась вверх, а потом фиксировалась. С помощью CSS можно зафиксировать, только она не будет плавающей, находил несколько вариантов но они не подходили т.к. одна прикреплялась к левому или правому краю, в другом варианте панель почему то мигала при прокрутке, тем самым вызывая раздражение при долгом просмотре.
     
  2. vladya

    vladya Создатель

    Регистр.:
    5 окт 2009
    Сообщения:
    34
    Симпатии:
    7
    Использовал для этих целей Перейти по ссылке, вернее при использовании этого фреймворка задействовал плавающую панель Components Navbar, которая фиксировалась при достижении ей верхней точки страницы. Но Bootstrap - это всего лишь конструктор из деталей которого собирается то, что вам нужно. Это я к тому говорю, что они облегчают решение поставленной задачи, а все алгоритмы поведения этих деталей можно задать самим. Например фиксация этой панели не по краю, а по центру - всё это делается через CSS и javascript.
     
  3. Mekc

    Mekc Писатель

    Регистр.:
    16 май 2013
    Сообщения:
    5
    Симпатии:
    0
    Добрый вечер, может кто нибудь посоветовать каким образом можно реализовать наличие постоянно плавающей кнопки на голосование в том или ином топе во время прокрутки скрола и перехода со страницы на страницу форума?
     
  4. gogikman

    gogikman Писатель

    Регистр.:
    14 июл 2010
    Сообщения:
    8
    Симпатии:
    0
    чтобы не моргало нужно сделать так

    html
    {
    //background: url(about: blank);
    }

    у блока, относительно которого будет фикс позиция ставим свойство
    position: relative;


    фиксирование позиции блока
    .side-menu-fix
    {
    position: fixed;
    top: 0px;
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
    }

    класс .side-menu-fix добавляем как только верхняя граница окна достигает блока, который необходимо зафиксировать

    примерный javascript:

    var OffsetMenu = $('.side-menu').offset();
    $(window).scroll(function()
    {
    if($(window).scrollTop() >= OffsetMenu.top)
    {
    $('.side-menu').addClass('side-menu-fix');
    }
    else
    {
    $('.side-menu').removeClass('side-menu-fix');
    }
    });
     
  5. metallphilin

    metallphilin старожил nulled

    Регистр.:
    25 авг 2006
    Сообщения:
    644
    Симпатии:
    185
    Как сказал vladya это не сложно реализуется через bootstrap вот так примерно выглядит div, который должен приклеиваться к верху экрана:

    <div id="my_custom_id" class="row-fluid" data-spy="affix" data-offset-top="195">

    ....

    </div>

    Перейти по ссылке

    data-offset-top - это величина в пикселах, от высоты экрана (что бы не "прыгало"), не сложно измеряется стандартными средствами браузера Chrome, либо подбирается методом научного тыка.
     
  6. cocs

    cocs

    Регистр.:
    5 дек 2009
    Сообщения:
    433
    Симпатии:
    107
    Вот такой код заюзал
    Код:
    <div>
    <script>
      $(window).scroll(function() {
      if ($(this).scrollTop()>40) $('#scrollable').css({'position':'fixed','top':'0px'});
      else $('#scrollable').css({'top':'0px','position':'absolute'});
      });
    </script>
    <div id='scrollable' style='width:300px;height:300px;'>
      <div class="block">
     
      </div>
    </div>
    </div>
    Картинки, текст и т.д вставляем в диве блок. Можно задавать отступы и размеры.
     
  7. APXOH

    APXOH Создатель

    Регистр.:
    16 янв 2013
    Сообщения:
    36
    Симпатии:
    6
    Как раз в соседней ветке тема обсуждалась похожая, приведу и здесь красивое решение
     
  8. exceptionnel02

    exceptionnel02 Писатель

    Регистр.:
    23 апр 2012
    Сообщения:
    4
    Симпатии:
    1
    Возможно, стоит с animate поэкспериментировать - это предать сайту некоторой анимированности
     
    Vasiliu jukov нравится это.
  9. Vasiliu jukov

    Vasiliu jukov Создатель

    Регистр.:
    14 мар 2013
    Сообщения:
    10
    Симпатии:
    4


    Вставил код через прилинкованный скрипт (шаблон на T3framework лезть в структуру не хочется, вот и вывернулся)
    <script src="Перейти по ссылке" type="text/javascript"></script>
    $(window).scroll(function() { if ($('#Mod195').scrollTop()>100) $('#Mod195').css({'position':'fixed','top':'0px'}); else $('#Mod195').css({'top':'0px','position':'absolute'}); });
    Где #Mod195
    <div class="ja-moduletable moduletablephoka clearfix" id="Mod195">

    И хм.. эффекта нет
    в Хроме не вижу обработчика scrollTop для моего <Дива>
    подскажите пожалуйста направление рытья ...

     
  10. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.133
    Симпатии:
    668
    Код:
    $(window).scroll(function() { if ($(this).scrollTop()>100) $('#Mod195').css({'position':'fixed','top':'0'}); else $('#Mod195').css({'top':'0','position':'absolute'}); });
     
    Vasiliu jukov нравится это.