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

vipiusss

  • Гуру
  • 5748
  • 343 / 10
  • Скайп: 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

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

AlekVolsk

  • Гуру
  • 6580
  • 382 / 4
Re: Прилипающее меню при прокрутке
« Ответ #2 : 26.09.2015, 22:13:12 »
Нет, чисто на CSS это не сделать, ибо стили всего лишь формируют внешний вид, а вот реагировать на события не умеют.
*

Fedor Vlasenko

  • Живу я здесь
  • 3816
  • 716 / 7
  • Все начинается с Value
*

Fedor Vlasenko

  • Живу я здесь
  • 3816
  • 716 / 7
  • Все начинается с Value
Re: Прилипающее меню при прокрутке
« Ответ #4 : 27.09.2015, 00: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

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

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

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

*

neogeek

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

al-teen

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

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

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

Fedor Vlasenko

  • Живу я здесь
  • 3816
  • 716 / 7
  • Все начинается с Value
Re: Прилипающее меню при прокрутке
« Ответ #8 : 27.09.2015, 15: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

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Прилипающее меню при прокрутке
« Ответ #9 : 27.09.2015, 15: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

  • Живу я здесь
  • 3816
  • 716 / 7
  • Все начинается с Value
Re: Прилипающее меню при прокрутке
« Ответ #10 : 27.09.2015, 15:40:19 »
для качества здесь далеко. Это пример работы не более. Далее на разработку программисту.
Качественно, к примеру https://github.com/Poznakomlus/pagination
пользуйтесь на здоровье
*

vipiusss

  • Гуру
  • 5748
  • 343 / 10
  • Скайп: renor_
Re: Прилипающее меню при прокрутке
« Ответ #11 : 28.09.2015, 07:33:44 »
ни как без скрипта, пробовал аж 4 способами....
 >:(

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

меню при прокрутке

Автор Akeksandr

Ответов: 0
Просмотров: 314
Последний ответ 22.11.2015, 20:14:28
от Akeksandr