Перейти к содержимому


Фотография
- - - - -

прилипающее меню к верхней границе браузера


Сообщений в теме: 10

#1 robotwerder

robotwerder

Отправлено 30 March 2017 - 12:40

<style type="text/css">

.tm-navbar.uk-navbar {
   top: 130px; 
   position: fixed;
   z-index: 1000;
   width:100%;
}
</style >

<script type="text/javscript">
var h_hght = 130; // высота шапки
var h_mrg = 0;    // отступ когда шапка уже не видна
                 
$(function(){
 
    var elem = $('.tm-navbar.uk-navbar');
    var top = $(this).scrollTop();
     
    if(top > h_hght){
        elem.css('top', h_mrg);
    }           
     
    $(window).scroll(function(){
        top = $(this).scrollTop();
         
        if (top+h_mrg < h_hght) {
            elem.css('top', (h_hght-top));
        } else {
            elem.css('top', h_mrg);
        }
    });
 
});
</script>

использовал этот пример .  для сайта http://poverka-elecom.ru/

но работает лишь css и при прокрутке вниз меню не прилипает к верхней границе.. как заставить работать яваскрипт  ?!

 


  • 0

#2 DMTR3000S

DMTR3000S

Отправлено 30 March 2017 - 14:12

robotwerder, вместо прикручивания своих костылей логичнее было бы использовать уже встроенные в uikit (который по факту у вас на сайте уже используется) функции. Обратите внимание на компонент uikit - sticky, он облегчит вам задачу. Всё что нужно сделать - подключить файлы sticky.css и sticky.js, да добавить нужному диву параметр data-uk-sticky.


  • 2

#3 robotwerder

robotwerder

Отправлено 31 March 2017 - 08:28

можно чуточку подробнее.. я совсем зеленый в этом деле..

мне нужно скачать компонент UIkit, выковырять файлы sticky.css и sticky.js и подключить их прописав класс к диву.. так?

 

просто я не совсем понимаю о каком компоненте который у меня используется идет речь ..вижу лишь установленный Widgetkit


  • 0

#4 robotwerder

robotwerder

Отправлено 31 March 2017 - 08:49

robotwerder, вместо прикручивания своих костылей логичнее было бы использовать уже встроенные в uikit (который по факту у вас на сайте уже используется) функции. Обратите внимание на компонент uikit - sticky, он облегчит вам задачу. Всё что нужно сделать - подключить файлы sticky.css и sticky.js, да добавить нужному диву параметр data-uk-sticky.

собственно сделал как и написал.. результата нет((

что может быть не так?


  • 0

#5 DMTR3000S

DMTR3000S

Отправлено 31 March 2017 - 10:01

мне нужно скачать компонент UIkit, выковырять файлы sticky.css и sticky.js и подключить их прописав класс к диву.. так?

Всё правильно, только к диву прописывается не класс, а атрибут. Под компонентом uikit я имею ввиду не компонент джумлы, а кусок самого uikit'а. Если посмотрите, у них на сайте есть раздел core - это тот функционал, что входит в ядро, а есть раздел components - это отдельно подключаемые вещи, которые я и называю компонентами.

 

Скрипт, у вас вроде как подключен, а вот стили недоступны - проверьте, лежит ли файл в указанном месте. Обратите внимание, что у вас какбэ используется warp, который даёт возможность подключать всё это барахло правильно. Для этого нужно зайти в

/templates/yoo_eat/

и раскидать скрипт и файл стилей по соответствующим папкам - js и css. Далее нужно открыть файл theme.config.php, который лежит здесь:

/templates/yoo_eat/layouts/

в конце его вы увидите две секции, отмеченные комментариями //add css и //add script. Копируете строку в каждой секции и изменяете имена файлов на sticky. Так вы подключите скрипт и стили методами шаблона.


  • 0

#6 robotwerder

robotwerder

Отправлено 31 March 2017 - 10:21

Всё правильно, только к диву прописывается не класс, а атрибут. Под компонентом uikit я имею ввиду не компонент джумлы, а кусок самого uikit'а. Если посмотрите, у них на сайте есть раздел core - это тот функционал, что входит в ядро, а есть раздел components - это отдельно подключаемые вещи, которые я и называю компонентами.

 

Скрипт, у вас вроде как подключен, а вот стили недоступны - проверьте, лежит ли файл в указанном месте. Обратите внимание, что у вас какбэ используется warp, который даёт возможность подключать всё это барахло правильно. Для этого нужно зайти в

/templates/yoo_eat/

и раскидать скрипт и файл стилей по соответствующим папкам - js и css. Далее нужно открыть файл theme.config.php, который лежит здесь:

/templates/yoo_eat/layouts/

в конце его вы увидите две секции, отмеченные комментариями //add css и //add script. Копируете строку в каждой секции и изменяете имена файлов на sticky. Так вы подключите скрипт и стили методами шаблона.

сделал все как вы написали.. а воз и ныне там ((
гляньте плиз..


  • 0

#7 DMTR3000S

DMTR3000S

Отправлено 31 March 2017 - 11:02

Мне нужны доступы к ftp, можете кинуть в ЛС


  • 0

#8 robotwerder

robotwerder

Отправлено 31 March 2017 - 11:24

Мне нужны доступы к ftp, можете кинуть в ЛС

отправил


  • 0

#9 DMTR3000S

DMTR3000S

Отправлено 31 March 2017 - 11:58

robotwerder, у вас используется достаточно старый шаблон, в более свежих версиях, очевидно, были правки, которые несовместимы с устаревшими компонентами. Подключил скрипт, который шёл с этим шаблоном - кажется, всё работает.


  • 1

#10 robotwerder

robotwerder

Отправлено 31 March 2017 - 12:03

ща поколдую с Z-index в css  .. наезжают надписи на меню при скролле вниз..

Спасибо большое..


  • 0




Click to return to top of page in style!