Автор Тема: Простое и эффектное плавающее меню jquery  (Прочитано 3199 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн una

  • Разработчик
  • *****
  • Сообщений: 582
    • Просмотр профиля
  • Версия modx: evo, revo
css:
.left {
   width: 70%;
   float: left;
   height: 1500px;
}
.right {
   margin-top: 10px;
   float: right;
   width: 20%;
}
#fixed {
   background: #CCC;
   padding: 20px;
}


В head подключаем jQuery и JavaScript:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>



script type="text/javascript">
   $(function() {
      var offset = $("#fixed").offset();
      var topPadding = 15;
      $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
            $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
         }
         else {$("#fixed").stop().animate({marginTop: 0});};});
   });
</script>

html:
<div class="left">
<!-- Содержание -->
</div>
<div class="right">
<div id="fixed">Текст фиксированного блока.</div>
</div>

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Re: Простое и эффектное плавающее меню jquery
« Ответ #1 : 19 Июль 2013, 12:38:08 »
А если то же самое вместо jQuery сделать на чистом JS - будет еще проще и эффективнее.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн una

  • Разработчик
  • *****
  • Сообщений: 582
    • Просмотр профиля
  • Версия modx: evo, revo
Re: Простое и эффектное плавающее меню jquery
« Ответ #2 : 19 Июль 2013, 13:35:56 »
проще и эффективнее
А css быстрее и доступнее  :08: