j_onepage_navigation

[Luminanz]

Bei Verwendung von js_onepage_navigation funktioniert die Erweiterung korrekt. Bei Verwendung der jQuery-Version j_onepage_navigation wird die active Klasse nicht vergeben. Ist das template j_onepage_navigation veraltet?

[denniserdmann]

Moin!

Soll so eigentlich nicht sein, ist aber möglich, da der Fokus vor allem auf der neuen JS-Lösung lag.
Welche Version verwendest du?

[Luminanz]

Ich verwende die aktuelle Version mit Contao 5.3 (LTS).

[denniserdmann]

Ich glaube, ich habe den Fehler gefunden. Kannst du es mal testen, indem du dieses Template anlegst?

j_onepage_navigation.html5

<script src="/bundles/eufonepagenavigation/jquery.waypoints.js"></script>
<script>
$(document).ready(function() {
  var el = $('a[href*="#"]').not('[href="#"]').not('[href="#0"]');
  var scrollSpeed = 800;
  var uri = window.location.href.split("#")[0];

  el.click(function(event) {
      // check if On-page links
      if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
          &&
          location.hostname == this.hostname
      ) {
              // Figure out element to scroll to
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
              // Does a scroll target exist?
              if (target.length) {
                  // Only prevent default if animation is actually gonna happen
                  event.preventDefault();
                  $('html, body').animate({
                      scrollTop: target.offset().top
              }, scrollSpeed);
              history.pushState("", "", uri + this.hash);
          }
      }
  });

        // set nav active when scrolling
  var navActive = function(section) {
    var $el = $('.mod_onepage_navigation .level_1');

    $el.find('li.active').removeClass('active');
    $el.each(function(){
      $(this).find('a[data-onepage-link="'+section+'"]').parent().addClass('active');
    });
  };

  var navigationSection = function() {
  var $section = $('.mod_article');

    $section.waypoint(function(direction) {

        if (direction === 'down') {
          if($(this.element).hasClass('onepage_article')) {
            // change url to active link
            navActive(this.element.id);
          }
        }
    }, {
        offset: '50%'
    });

    $section.waypoint(function(direction) {

        if (direction === 'up') {
          var previousWaypoint = this.previous();

          if($(this.element).hasClass('onepage_article')) {
            // change url to active link
            navActive(this.element.id);
          }
        }

    }, {
        offset: function() {
          return (this.context.innerHeight()/2) - this.element.offsetHeight; // offset 50% from bottom
        },
        group: $section
    });
  };

  $(function(){
    navigationSection();
  });

});
</script>

Die Änderungen kannst du in der „Template vergleichen“-Funktion von Contao sehen.

[Luminanz]

Perfekt, damit funktioniert es. Vielen Dank für die rasche Hilfe.

Für mobile Geräte ist diese Erweiterung aber nicht ausgelegt, oder?
Hier müsste man selber noch nachbessern ("Hamburger"-toggle und Schliessen der mobilen Menu-Version bei Klick auf einen Link)?

[denniserdmann]

Super, ich werde das j_onepage_navigation.html5 Template nach Ostern anpassen und veröffentlichen.

Für mobile Geräte ist diese Erweiterung aber nicht ausgelegt, oder?
Hier müsste man selber noch nachbessern ("Hamburger"-toggle und Schliessen der mobilen Menu-Version bei Klick auf einen Link)?

Die Logik solltest du im Script des Hamburger-Buttons mit einbauen. Schau mal bei SIRIUS, da kannst du nachvollziehen, wie wir das gelöst haben: https://erdmann-freunde.de/contao-themes/sirius