Плавающий элемент (шапка) для мобильной версии

Скриншот ошибки :

Описание ошибки : ..
Нужно реализовать плавающий элемент - хедер только для мобильных устройств. На десктопной версии хедер вместе с меню уже стоит в позиции fixed.
В респонсивном файле, где @media screen and (max-width: 750px) элемент хедер имеет height:70px; и расположен под меню (top: 70px), а при прокрутке он должен фиксироваться вверху страницы, т.е само меню прокручивается (как есть), а хедер с лого и телефоном фиксируется (top: 0px).
Нужно подключить jQuery скрипт для фиксации хедера вверху страницы при прокрутке.
Какой код рабочий, и правильно ли для его работы только на экранах max-width: 750px подключать перед боди в общем индексном файле?

Название хостинга или локального сервера : ...
Majordomo
Версия php : 5.6
Joomla 3.4.4
Шаблон S5 Oasis v1.0

мне в вашем сайте ковыряться немного лень - там бардак немного
а решение на css подойдет?

как видите все как нужно и выглядит норм...

#s5_responsive_mobile_top_bar_wrap{z-index: 0 !important}
#s5_header_area2{top:0}
body{margin-top: 70px}
все это естественно в нужном вам media query

чтобы код из предыдущего топика заработал нужно использовать jQuery вместо $
jQuery(window).scroll(function() {
var top = jQuery(document).scrollTop();
if (top < 70) jQuery("#s5_header_wrap").css({top: '0', position: 'relative'});
else jQuery("#s5_header_wrap").css({top: '0', position: 'fixed'});
});
но выглядит это убого - лучше мучайтесь с css...

В этом коде
jQuery(window).scroll(function() {
var top = jQuery(document).scrollTop();
if (top < 70) jQuery("#s5_header_wrap").css({top: '0', position: 'relative'});
else jQuery("#s5_header_wrap").css({top: '0', position: 'fixed'});
});
поменяла id на #s5_header_area2 и подключила его в нужном media.php, в css изменила пару параметров. Выглядит ничо таг, годится и плавает и фиксируется.
Спасибо, Modi34