Javascript Conflict Unknown

[john-doe]

Greetings.

I'm having the following problem.

I'm building a template for a joomla site. This template has a javascript script which allows the main menu bar to dock above the menu. I have made an HTML mockup to test the menu in context and it worked correctly offline (HTML and folders directly on the computer)

This is a Codepen I have made to test the feature

Code: Select all

https://codepen.io/aldemarhern/pen/EZJmpJ

This is the Sample i have made offline but has the problem that instead of slide the menu it goes directly on top
(I know this sample is not joomla yet but the script is identically written as the code pen and the styles were set up for the template)

Code: Select all

http://vicarioestudio.com/demos/kairos/sample/

And then here is the joomla template set (without some modules but with enough length to test the docked bar)

Code: Select all

http://vicarioestudio.com/demos/kairos/index.php

When i saw the problem at first time Firebug threw me a bunch of console errors while i scrolled the window.
The errorrs said TypeError: $ is not a function on line 7
Here is the Head of my template's index.php (Before the doctype)

Code: Select all

<?php
defined( '_JEXEC' ) or die;
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Añadiendo las hojas de estilos CSS
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/default.css');
//$doc -> addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js');
$doc -> addScript('templates/'.$this->template.'/js/bootstrap.js');
$doc -> addScript('templates/'.$this->template.'/js/menudock.js');
unset($doc->_scripts[JURI::root(true) . '/media/jui/js/bootstrap.min.js']);
//unset($doc->_scripts[JURI::root(true) . '/media/jui/js/jquery.js']);
//unset($doc->_scripts[JURI::root(true) . '/media/jui/js/jquery.min.js']);
?>

What i have tested yet? Well i disabled the google's JQuery in order o keep only Joomla's Jquery.
What changed with this? That now only throws an error and now it says The errorrs said TypeError: $ is not a function on line 11.

What else i have tested? Disabling Jquery from the core and using only google's
What happened? Came back the error rising as i scroll.

When i was going to prepare files to show the problem i added the HTML Mockup and that is not behaving as the codepen which it seems odd.

I'm now well versed in javascript since I'm not sure about where to begin to seek help.
Thanks in advance

[john-doe]

UPDATE: I still have the same problem but i have reformuled the JS this way

Code: Select all

(function ($) {
    "use strict";
    var mn = $(".barblock"),
        mns = "lock",
        hdr = $('.kairos-logointro').height();
    $(window).scroll(function () {
        if ($(this).scrollTop() >= hdr) {
            mn.addClass(mns);
        } else {
            mn.removeClass(mns);
        }
    });
}(jQuery));

I have made tests on the HTML files as control, and works but what I don't understand is why isn Joomla is not working properly