Contao 4.7.1 - jQuery - OnePageNav Template funzt nicht wie gewünscht

Moin,

ich habe da mal eine Frage an die jQuery->Experten:

In meinem OnePageNav Template der Seite: https://www.luetten-dieks-carlito.eu möchte ich gerne einen ScrollOffset "$('#header-bar').height()" verwenden, der nur beim ScrollUp greift, bei ScrollDown soll der scrollOffset: 0 sein.

Dazu habe ich nachfolgendes Template erstellt.

Leider ist der Wert von "var offSet" außerhalb der Function "$(window).on('scroll', function () { ..." offenbar undefiniert, so dass in der Function "$('#nav').onePageNav({..." der Wert für "scrollOffset" ebenfalls undefiniert ist und als scrollOffset immer 0 gesetzt wird.

"Eigentlich" ist "var offSet" doch eine globale Variable, oder ???? Bitte um Hilfe, wo mein Denkfehler liegt ...

Code:

---

<script src="<?= TL_FILES_URL ?>files/freestyle-fx/js/jquery.nav.min.js"></script>
<script>
jQuery(function($) {
       
        var iScrollPos = 0;
        var offSet = 0;
       
        $(window).on('scroll', function () {
            var iCurScrollPos = $(this).scrollTop();
            if (iCurScrollPos > iScrollPos) {
                    offSet = 0
            } else {
                    offSet =  $('#header-bar').height()
                }
            iScrollPos = iCurScrollPos;
        });
       
    $('#nav').onePageNav({
        currentClass: 'active',
        scrollSpeed: 1000,
        changeHash: true,
        easing: 'easeInOutCirc',
        scrollOffset: offSet
    });
});
</script>

---

Zitat:

---

Zitat von Seefahrer

"Eigentlich" ist "var offSet" doch eine globale Variable, oder ????

---

Ich würde sagen, nein. Vgl. dazu (lokale Variabe innerhalb der function())

Code:

---

<script>
jQuery(function($) {
       
        var iScrollPos = 0;
        var offSet = 0;
        // ...

---

vs. (außerhalb der function())

Code:

---

<script>
var iScrollPos = 0;
var offSet = 0;

jQuery(function($) {
       
        // ...

---

Danke @fiedsch

klappt leider auch nicht, hatte ich bereits zuvor versucht, die Variable ist weiterhin offenbar undefined ...

Habe das Template jetzt wie folgt verändert:

Code:

---

<script src="<?= TL_FILES_URL ?>files/freestyle-fx/js/jquery.nav.min.js"></script>
<script>

var iScrollPos = 0;
var offSet = 0;

jQuery(function($) {

        $(window).on('scroll', function () {
            var iCurScrollPos = $(this).scrollTop();
            offSet = (iCurScrollPos > iScrollPos) ? 0 : $('#header-bar').height();
                iScrollPos = iCurScrollPos;
        });

        $('#nav').onePageNav({
          currentClass: 'active',
          scrollSpeed: 1000,
          changeHash: true,
          easing: 'easeInOutCirc',
          scrollOffset: offSet
        });

});
</script>

---

In der "$(window).on('scroll', function () { ..." besteht kein Zugriff auf die Variable "offSet", d.h. es wird kein Wert zugewiesen, so dass in der "$('#nav').onePageNav({ ..." nur der in der Variablendeklaration zugewiesene Wert übernommen wird....

Strange, aber wahrscheinlich habe ich da ein grundsätzliches Verständnisproblem mit JS/jQuery ... :rolleyes: