# JS Sticky Navigation: ReferenceError: $ is not defined
**URL:** https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258
**Category:** Programmierung
**Created:** [3. Januar 2019 um 10:41 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258 "2019-01-03T10:41:53Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@m23](https://forum.shopware.com/u/m23)
#### Post date: [3. Januar 2019 um 10:41 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/1 "2019-01-03T10:41:53Z")
```
var menu = $(".navigation-main");
menuscrolled = "main-nav-scrolled";
headr = $('.header-main').height();
wdth= $('.container').width();
$(window).scroll(function() {
if( $(this).scrollTop() > headr ) {
menu.addClass(menuscrolled);
menu.css('width', wdth+'px');
} else {
menu.removeClass(menuscrolled);
}
});
```
Hallo, ich verzweifle gerade an obigem Code, den ich als JS-Datei eingebunden habe. In der Konsole steht “ReferenceError: $ is not defined” und ich habe keine Idee, wie ich das lösen kann. Was fehlt Shopware hier, bzw. was läuft da falsch? Vielen Dank für Tipps und Tricks!
---
### Author:  [@R4M](https://forum.shopware.com/u/R4M)
#### Post date: [3. Januar 2019 um 10:45 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/2 "2019-01-03T10:45:24Z")
Ich vermute, dass an dieser Stelle das jQuery noch gar nicht geladen ist/wurde und somit kann kann JS mit $ nichts anfangen.
---
### Author:  [@m23](https://forum.shopware.com/u/m23)
#### Post date: [3. Januar 2019 um 10:52 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/3 "2019-01-03T10:52:52Z")
Ich habe das gerade mal vom header.tpl an das Ende der index.tpl gepackt - der Fehler bleibt bestehen.
---
### Author:  [@sschreier](https://forum.shopware.com/u/sschreier)
#### Post date: [3. Januar 2019 um 11:21 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/4 "2019-01-03T11:21:53Z")
Hallo,
mach mal folgenden Code noch um deinen JavaScript - Code:
```
$(function() {
/* Dein Code */
});
```
Grüße
Sebastian
---
### Author:  [@m23](https://forum.shopware.com/u/m23)
#### Post date: [3. Januar 2019 um 11:22 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/5 "2019-01-03T11:22:15Z")
```
{block name="frontend_index_header_javascript_jquery_lib"}
{$smarty.block.parent}
{literal}
var menu = $(".navigation-main");
menuscrolled = "main-nav-scrolled";
headr = $('.header-main').height();
wdth= $('.container').width();
$(window).scroll(function() {
if( $(this).scrollTop() > headr ) {
menu.addClass(menuscrolled);
menu.css('width', wdth+'px');
} else {
menu.removeClass(menuscrolled);
}
});
{/literal}
{/block}
```
So müsste es doch eigentlich funktionieren, dennoch “$ is not defined”.
---
### Author:  [@sschreier](https://forum.shopware.com/u/sschreier)
#### Post date: [3. Januar 2019 um 11:23 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/6 "2019-01-03T11:23:51Z")
Hallo,
siehe mein Beitrag oben - als Inline - JavaScript würde ich es aber auf keinen Fall machen (sondern wie von Shopware vorgesehen wie hier: [https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files](https://developers.shopware.com/designers-guide/css-and-js-files-usage/?_ga=2.200617447.814387192.1546342961-924015160.1463247506#add-javascript-files) ).
Grüße
Sebastian
---
### Author:  [@wontfix](https://forum.shopware.com/u/wontfix)
#### Post date: [3. Januar 2019 um 11:26 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/7 "2019-01-03T11:26:18Z")
addiere dein javascript datei durch theme:
[Using CSS and JavaScript in themes](https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files)
oder durch plugin:
[Plugin quick Startup Guide](https://developers.shopware.com/developers-guide/plugin-quick-start/#frontend-resources-auto-registration)
damit kann shopware diese javascript datein in die eine javascript datei zusammenstellen, und sicherstellen das jquery zuerst geladen wird.
ps. oder irgendwann in zukunft [import - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
---
### Author:  [@m23](https://forum.shopware.com/u/m23)
#### Post date: [3. Januar 2019 um 11:33 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/8 "2019-01-03T11:33:58Z")
Vielen Dank, so klappt es. Gebe ich mehrere Scripte mit “,” getrennt an?
protected $javascript = [
‘src/js/vendors/file1.js’,
‘src/js/vendors/file2.js’
];
---
### Author:  [@R4M](https://forum.shopware.com/u/R4M)
#### Post date: [3. Januar 2019 um 11:39 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/9 "2019-01-03T11:39:46Z")
Eventuell geht es auch so:
```
window.onload = function () {
// hier dein jQuery
};
```
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [3. Januar 2019 um 11:53 UTC](https://forum.shopware.com/t/js-sticky-navigation-referenceerror-is-not-defined/57258/10 "2019-01-03T11:53:39Z")
Ich habe hier ein simples jQuery sticky Plugin, welches Ihr nutzen könnt.
> **[Shopware jQuery sticky menu / element](https://christopherdosin.me/shopware-sticky-menu/)**
>
> This article is about how to write a very basic jQuery Plugin for Shopware to get a sticky menu / element based on the scroll position.
> For example we can apply…