Форум русской поддержки Joomla!® CMS
10.12.2016, 01:22:48 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 1185 раз)
0 Пользователей и 1 Гость смотрят эту тему.
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« : 26.09.2015, 20:39:27 »

Делал себе, выложу и вам, может кому надо.

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>


 это в индекс шаблона ну и файлы согласно пути.

* js.zip (32.95 Кб - загружено 23 раз.)
Записан
12mv
Завсегдатай
*****

Репутация: +20/-0
Offline Offline

Пол: Женский
Сообщений: 580


Гульсина


« Ответ #1 : 26.09.2015, 21:00:16 »

Бохтымой, зачем же сразу скриптами?  Это вполне можно реализовать на CSS
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #2 : 26.09.2015, 23:13:12 »

Нет, чисто на CSS это не сделать, ибо стили всего лишь формируют внешний вид, а вот реагировать на события не умеют.
Записан
Fedor Vlasenko
Профи
********

Репутация: +696/-5
Offline Offline

Пол: Мужской
Сообщений: 3820


Все начинается с Value


« Ответ #3 : 27.09.2015, 00:27:59 »

Выложу ссылку http://jsfiddle.net/vlasenkofedor/BN4vj/
и так можно столько стиль поправить на все окно
http://jsfiddle.net/vlasenkofedor/6n16wbgg/
там пару строк. :-)
Записан
Fedor Vlasenko
Профи
********

Репутация: +696/-5
Offline Offline

Пол: Мужской
Сообщений: 3820


Все начинается с Value


« Ответ #4 : 27.09.2015, 01:04:35 »

Федор, вообще-то хотели одним CSS, без JavaScript.
Только fixed, есть способы менять стили в некоторых ситуациях без js? но для прокрутки увы не знаю и больше всего нет
Примеры вышеозвученного
http://jsfiddle.net/vlasenkofedor/u9mhA/
http://jsfiddle.net/vlasenkofedor/59T3Z/
http://jsfiddle.net/vlasenkofedor/qPC6a/

Теперь отвечаю как работает код
Код
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
Завсегдатай
*****

Репутация: +20/-0
Offline Offline

Пол: Женский
Сообщений: 580


Гульсина


« Ответ #5 : 27.09.2015, 13:00:28 »

На CSS сделала фиксированное только, но без скрола)) Прилипшее к верху.

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

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


* site.zip (59.12 Кб - загружено 6 раз.)
Записан
neogeek
Давно я тут
****

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #6 : 27.09.2015, 13:39:44 »

Одним CSS можно сделать при некоторых условиях.
1 Меню всегда в самом верху
2 У меню фиксированная высота
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #7 : 27.09.2015, 14:42:08 »

Дело не в наличии или отсутствии js, а в качестве и логичности решения. Неважно 3 там строчки кода или 500. Рекомендуемый выше stickUp (демо), перехрдим по ссылке, скроллим на середину страницы, перезагружаемся. Мы остались там же, в середине страницы, но шапка пропала. Чтобы она появилась, нужно потыркать туда-сюда колесиком мыши. Это разве правильное, логичное поведение? Если я иду на страницу по якорю, то могу сразу попасть на середину страницы. И внезапные прилетания шапки (ой, мать моя! там оказывает шапка есть!) создают не лучшее впечатление о сайте.

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

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

Репутация: +696/-5
Offline Offline

Пол: Мужской
Сообщений: 3820


Все начинается с Value


« Ответ #8 : 27.09.2015, 16:10:56 »

al-teen то, что ты показываешь делается да, то-же 2-3 мя строчками, а зачем писать больше
для данной ситуации достаточно сохранить данные (не в storage, не в куаках) а в window.name
программист должен писать мало, но качественно. Вот HTML страница сохраните на диск и пару раз обновите ее, чтоб понять как работает
Код
 
<!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
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #9 : 27.09.2015, 16:32:35 »

al-teen то, что ты показываешь делается да, то-же 2-3 мя строчками, а зачем писать больше
для данной ситуации достаточно сохранить данные (не в storage, не в куаках) а в window.name
программист должен писать мало, но качественно. Вот HTML страница сохраните на диск и пару раз обновите ее, чтоб понять как работает
Код
 
<!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
Профи
********

Репутация: +696/-5
Offline Offline

Пол: Мужской
Сообщений: 3820


Все начинается с Value


« Ответ #10 : 27.09.2015, 16:40:19 »

для качества здесь далеко. Это пример работы не более. Далее на разработку программисту.
Качественно, к примеру https://github.com/Poznakomlus/pagination
пользуйтесь на здоровье
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #11 : 28.09.2015, 08:33:44 »

ни как без скрипта, пробовал аж 4 способами....
 Angry

зато для себя открыл много новых эффектов практикой.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet