Прилипающее меню при прокрутке

  • 11 Ответов
  • 1985 Просмотров

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

*

Оффлайн vipiusss

  • ********
  • 5452
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
Делал себе, выложу и вам, может кому надо.

1.Окружаем дивом, который будет фиксировать, ваше меню:

<div class="navbar-wrapper">
Тут ваше меню или иной элемент для фиксации
</div>

2.В конце добавил мини скрипт:

   <script type="text/javascript">
      jQuery(function($) {
        $(document).ready( function() {
          $('.navbar-wrapper').stickUp({});
        });
      });
    </script>


Удалил часть для простоты и убрал эффекты.

Это для того чтобы не
.isStuck{
    left:0px;
    width:100%;
}


ваше меню было на 100%

в принципи всё.

.navbar-wrapper {
    ваш стиль как у вас было
}

и в добавок пару скриптов, в атаче.

   <script src="/ваш путь от корня/jquery.js"></script>
    <script src="/ваш путь от корня/stickUp.min.js"></script>


 это в индекс шаблона ну и файлы согласно пути.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн 12mv

  • *****
  • 526
  • [+]20 / [-]0
  • Гульсина
    • Просмотр профиля
Re: Прилипающее меню при прокрутке
« Ответ #1 : 26.09.2015, 22:00:16 »
Бохтымой, зачем же сразу скриптами?  Это вполне можно реализовать на CSS

*

Оффлайн AlekVolsk

Re: Прилипающее меню при прокрутке
« Ответ #2 : 27.09.2015, 00:13:12 »
Нет, чисто на CSS это не сделать, ибо стили всего лишь формируют внешний вид, а вот реагировать на события не умеют.

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: Прилипающее меню при прокрутке
« Ответ #4 : 27.09.2015, 02:04:35 »
Федор, вообще-то хотели одним CSS, без JavaScript.
Только fixed, есть способы менять стили в некоторых ситуациях без js? но для прокрутки увы не знаю и больше всего нет
Примеры вышеозвученного
http://jsfiddle.net/vlasenkofedor/u9mhA/
http://jsfiddle.net/vlasenkofedor/59T3Z/
http://jsfiddle.net/vlasenkofedor/qPC6a/

Теперь отвечаю как работает код
Код: javascript
jQuery(function (f) {
    f(window).scroll(function () {
        f('#secondary_bar')[
            (f(this).scrollTop() > 55 ? "add" : "remove") + "Class"
            ]("bar_fixed");
    });
});
внутри f=== jQuery, данный подход позволяет одновременно использовать внутри функции к примеру Mootols == $
 f('#secondary_bar') так-же как $('#secondary_bar') возвращает объект а у объекта методы можно по разному вызывать
Через точку как все постоянно видят, так и через $['metod']. Таким образом я формирую от условия динамически вызываемый метод
addClass или removeClass
вот и вся магия :-)

*

Оффлайн 12mv

  • *****
  • 526
  • [+]20 / [-]0
  • Гульсина
    • Просмотр профиля
Re: Прилипающее меню при прокрутке
« Ответ #5 : 27.09.2015, 14:00:28 »
На CSS сделала фиксированное только, но без скрола)) Прилипшее к верху.

Сделала в Muse прилипающее меню, можно код посмотреть. Но там скрипты есть, дофига.
Блин, вот раньше делала на CSS разные эффекты, что то забыла всё.. я ещё посижу, подумаю, не успокоюсь))))

А пока вот, первый опыт в муське (это так просто, посмотреть а не как решение)  ;D


*

Оффлайн neogeek

Re: Прилипающее меню при прокрутке
« Ответ #6 : 27.09.2015, 14:39:44 »
Одним CSS можно сделать при некоторых условиях.
1 Меню всегда в самом верху
2 У меню фиксированная высота

*

Оффлайн al-teen

Re: Прилипающее меню при прокрутке
« Ответ #7 : 27.09.2015, 15:42:08 »
Дело не в наличии или отсутствии js, а в качестве и логичности решения. Неважно 3 там строчки кода или 500. Рекомендуемый выше stickUp (демо), перехрдим по ссылке, скроллим на середину страницы, перезагружаемся. Мы остались там же, в середине страницы, но шапка пропала. Чтобы она появилась, нужно потыркать туда-сюда колесиком мыши. Это разве правильное, логичное поведение? Если я иду на страницу по якорю, то могу сразу попасть на середину страницы. И внезапные прилетания шапки (ой, мать моя! там оказывает шапка есть!) создают не лучшее впечатление о сайте.

Теперь смотрим вот этот плагин. Скроллим, перезагружаемся. Здорово?
Или вот этот
Или вообще трендовый, типа "Material UI"

Могут ли "3 строчки" показать подобный результат? Да и в каком веке живем? - на телефоне интернет быстрее, чем скоростной доступ по оптике 10 лет назад. И все эти бессмысленные гонки за "тремя строчками" остались там же - в 10летней давности. Важна только производительность кода, а не его объем (ну, если там не 10 мегабайт конечно). А для юзабилити важна логичность, плавность интерфейса.

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: Прилипающее меню при прокрутке
« Ответ #8 : 27.09.2015, 17:10:56 »
al-teen то, что ты показываешь делается да, то-же 2-3 мя строчками, а зачем писать больше
для данной ситуации достаточно сохранить данные (не в storage, не в куаках) а в window.name
программист должен писать мало, но качественно. Вот HTML страница сохраните на диск и пару раз обновите ее, чтоб понять как работает
Код: html4strict
 
<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div id="test"></div>
    <script>
      window.onload = function () {
        window.name = (+window.name || 0) + 1;
        test.innerHTML = window.name;
      };
    </script>
  </body>
</html>

*

Оффлайн al-teen

Re: Прилипающее меню при прокрутке
« Ответ #9 : 27.09.2015, 17:32:35 »
al-teen то, что ты показываешь делается да, то-же 2-3 мя строчками, а зачем писать больше
для данной ситуации достаточно сохранить данные (не в storage, не в куаках) а в window.name
программист должен писать мало, но качественно. Вот HTML страница сохраните на диск и пару раз обновите ее, чтоб понять как работает
Код: html4strict
 
<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div id="test"></div>
    <script>
      window.onload = function () {
        window.name = (+window.name || 0) + 1;
        test.innerHTML = window.name;
      };
    </script>
  </body>
</html>
Это, как я понимаю, и есть пример малого, но качественного. Благодарю за информацию.

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: Прилипающее меню при прокрутке
« Ответ #10 : 27.09.2015, 17:40:19 »
для качества здесь далеко. Это пример работы не более. Далее на разработку программисту.
Качественно, к примеру https://github.com/Poznakomlus/pagination
пользуйтесь на здоровье

*

Оффлайн vipiusss

  • ********
  • 5452
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
Re: Прилипающее меню при прокрутке
« Ответ #11 : 28.09.2015, 09:33:44 »
ни как без скрипта, пробовал аж 4 способами....
 >:(

зато для себя открыл много новых эффектов практикой.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями