Contao Version 4.13.14 und ErdmannFreunde Onepage-Navigation

Liebe Gemeinde,
ich habe eine (wirklich sehr simple) Seite am Laufen, bei der ich die o.g. Extension einsetze. Live derzeit bei V3.5.19. Offline lokal auf Contao V4.13.14. Soweit ok, aber:
1. Das Soft-Scrolling funktioniert nicht mehr bzw. nur noch mit DEAKTIVIERTEM js-template "js_onepage_navigation.html5", was nicht so schlimm wäre.
2. Das Offset stimmt nicht mehr, die einzelnen Artikel werden also so weit nach oben gescrollt, dass die <H2> hinter dem <header> verschwindet, in dem die Navigation sitzt.

Ich bekomm's einfach nicht hin. Und wäre für Tips dankbar. https://www.digital-consulting.de

So, habe jetzt auch die aktuelle V4.13.14 online unter https://c4.digital-consulting.de

Da du einen sticky header einsetzt, müsstest du die Scrollposition in dem Scroller-Script anders berechnen.

In deinem Fall könntest du das aber vermutlich auch mit CSS erledigen.

Füg mal zu deinem CSS folgendes hinzu:

Code:

---

.mod_article.blue.onepage_article:first-of-type {
  margin-top: -60px;
}
.mod_article h1:first-of-type, .mod_article h2:first-of-type {
  padding-top: 60px;
}

---

Du kannst das Offset auch im Template angeben, es geht sogar dynamisch, indem man die Höhe des sticky-divs abfragt… ich guck eben mal nach meinem Template…

j_onepage_navigation_offset.html5

Code:

---

<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];
        // Check height of the header and padding
    var header_height = $('.mainnav').outerHeight();

  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) - header_height
              }, scrollSpeed);
              history.pushState("", "", uri + this.hash);
          }
      }
  });

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

    $el.find('li.active').removeClass('active');
    $el.each(function(){
      $(this).find('a[data-onepagelink="'+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>

---

Musst natürlich die class deines sticky-divs nehmen.

VG
Thomas

Guten Morgen zusammen,
herzlichen Dank für die Lösungsvorschläge – beide Wege funktionieren. Ich habe mich für die dynamische Lösung von @tblumrich entschieden. Ich war nur verwundert, dass die Vorgängerversion der Extension dieses Phänomen offenbar selbstständig berücksichtigt hatte, die aktuelle Version jedoch nicht.
Herzliche Grüße
Attila Sirman