# Eigenes Javascript einfügen

**URL:** <https://forum.shopware.com/t/eigenes-javascript-einfugen/63363>\
**Category:** Themes & Design\
**Created:** [5. Dezember 2019 um 09:59 UTC](https://forum.shopware.com/t/eigenes-javascript-einfugen/63363 "2019-12-05T09:59:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trippe](https://avatars.discourse-cdn.com/v4/letter/t/7feea3/32.png) [@Trippe](https://forum.shopware.com/u/Trippe)\
**Post date:** [5. Dezember 2019 um 09:59 UTC](https://forum.shopware.com/t/eigenes-javascript-einfugen/63363/1 "2019-12-05T09:59:46Z")

</div>

Hallo,

ich habe schon einiges gelesen und denke das ich es richtig umsetze, trotzdem hakt es irgendwo…

Ich möchte gerne die Navigation beim Scrollen oben fixieren. Folgendes habe ich gemacht:

in -\> themes/Frontend/MeinTheme/frontend/\_public/src/js/ -\> neue Datei erstellt: fixednav.js mit folgenden Inhalt:

```
$(document).ready(function () {
    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - 70;
        if ($(window).scrollTop() > navHeight) {
            $('navigation-main').addClass('fixed');
        }
        else {
            $('navigation-main').removeClass('fixed');
        }
    });
});

```

in -\> themes/Frontend/MeinTheme/Theme.php -\> folgendes eingetragen:

Leider wird die Class fixed nicht der Main-Navigation hinzugefügt.  
Kann mir jemand sagen was ich verkehrt mache?

Gruß Michael

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [5. Dezember 2019 um 10:45 UTC](https://forum.shopware.com/t/eigenes-javascript-einfugen/63363/2 "2019-12-05T10:45:02Z")

</div>

```
document.asyncReady(function() {
   ....
})

```

statt

```
$(document).ready(function () {
   ...
})

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Trippe](https://avatars.discourse-cdn.com/v4/letter/t/7feea3/32.png) [@Trippe](https://forum.shopware.com/u/Trippe)\
**Post date:** [5. Dezember 2019 um 10:57 UTC](https://forum.shopware.com/t/eigenes-javascript-einfugen/63363/3 "2019-12-05T10:57:24Z")

</div>

```
document.asyncReady(function () {
    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - 70;
        if ($(window).scrollTop() > navHeight) {
            $('navigation-main').addClass('fixed');
        }
        else {
            $('navigation-main').removeClass('fixed');
        }
    })
});

```

Funktioniert leider auch nicht.

Liegt es vielleicht daran das ich lokal über XAMPP entwickle?

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [5. Dezember 2019 um 12:05 UTC](https://forum.shopware.com/t/eigenes-javascript-einfugen/63363/4 "2019-12-05T12:05:52Z")

</div>

```
.navigation-main

```

statt

```
navigation-main

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Trippe](https://avatars.discourse-cdn.com/v4/letter/t/7feea3/32.png) [@Trippe](https://forum.shopware.com/u/Trippe)\
**Post date:** [5. Dezember 2019 um 12:23 UTC](https://forum.shopware.com/t/eigenes-javascript-einfugen/63363/5 "2019-12-05T12:23:27Z")

</div>

Hatte ich auch schon getestet, es will einfach nicht funktionieren.

Habe es jetzt mit CSS umgesetzt:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position:&nbsp;-webkit-sticky;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;sticky;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0;

Waren noch einige weitere CSS-Anpassungen notwendig, passt jetzt aber.  
&nbsp;

&nbsp;