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

[Seefahrer]

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 ...

<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>

[fiedsch]

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

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

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

vs. (außerhalb der function())

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

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

[Seefahrer]

Danke @fiedsch

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

[Seefahrer]

Habe das Template jetzt wie folgt verändert:

<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 ...