Klassenvergabe abhängig von Offset eines Elementes

[AzRaIL]

Nabend,

Habe auf einer Seite eine Navigation und ein paar Aker

HTML:

<ul>
<li class="first"><a href="#anker1">Anker 1</a></li>
<li class="sec"><a href="#anker2">Anker 2</a></li>
<li class="third"><a href="#anker3">Anker 3</a></li>
<li class="fourth"><a href="#anker4">Anker 4</a></li>
</ul>

<a id="anker1"></a>
<div>
---CONTENT---
</div>
<a id="anker2"></a>
<div>
---CONTENT---
</div>
<a id="anker3"></a>
<div>
---CONTENT---
</div>
<a id="anker4"></a>
<div>
---CONTENT---
</div>

Nun möchte ich, dass wenn man scrollt, den a's eine Klasse vergeben wird sobald die Anker keinen Abstand mehr nach oben haben.
Mein Ansatz dazu:

jQuery(window).scroll(function() {
    var target1 = jQuery('#anker1').offset.top;
    var target2 = jQuery('#anker2').offset.top;
    var target3 = jQuery('#anker3').offset.top;
    var target4 = jQuery('#anker4').offset.top;
   
    if(target1 == 0) {
        jQuery('.menu li.first a').addClass('active');
    }
    else if (target2 == 0) {
        jQuery('.menu li.first a').removeClass('active');
        jQuery('.menu li.sec a').addClass('active');
    }
    else if (target3 == 0) {
        jQuery('.menu li.first a').removeClass('active');
        jQuery('.menu li.sec a').removelass('active');
        jQuery('.menu li.third a').addClass('active');
    }
    else if (target4 == 0) {
        jQuery('.menu li.first a').removeClass('active');
        jQuery('.menu li.sec a').removelass('active');
        jQuery('.menu li.third a').removeClass('active');
        jQuery('.menu li.fourth a').addClass('active');
    }
});

Kriege keinen Fehler, jedoch passiert auch nichts...
Für mich erscheint es eigentlich ganz logisch. Oder wie würdet ihr es machen?

lg

 

[Tronjer]

Wie wäre es mit 'Baby Steps' und der Firebug Konsole? Und verwende endlich mal $ anstatt von jQuery.

Deine targets werden niemals die Bedingung erreichen, weil a) offset().top die Position eines DOM-Elements vom oberen Rand bezeichnet, und diese sich nicht verändert, und b) exakt die '0' beim Scrollen zu erreichen, ziemlich schwer ist.

Was du tun musst, ist die statische Position der Container mit offset().top gegen die dynamische Position der Scrollbar per scrollTop()) matchen. Da die Links in der Navigation und die IDs der Container gleich lauten, lassen sich die redundanten Strings innerhalb der Funktion vermeiden.

HTML:

<nav>
  <ul>
    <li class="first"><a href="#anker1">Anker 1</a></li>
    <li class="sec"><a href="#anker2">Anker 2</a></li>
    <li class="third"><a href="#anker3">Anker 3</a></li>
    <li class="fourth"><a href="#anker4">Anker 4</a></li>
  </ul>
</nav>
<main>
  <p class="text" id="anker1">Anker 1</p>
  <p class="text" id="anker2">Anker 2</p>
  <p class="text" id="anker3">Anker 3</p>
  <p class="text" id="anker4">Anker 4</p>
</main>

jQuery:

$(window).scroll(function(index) {
  var scrollPosition = $(window).scrollTop();

  $('.text').each(function(i) {
    var containerID = $(this).prop('id');

    if ( $(this).offset().top <= scrollPosition ) {
      $('a').removeClass('active');
      $('[href="#' + containerID + '"]').addClass("active");
    }
  });
});