Contao Version 4.13.14 und ErdmannFreunde Onepage-Navigation

[attila.sirman]

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

[attila.sirman]

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

[folkfreund]

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:

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

[tblumrich]

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

<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

[attila.sirman]

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

[Schnubi]

Hi, ich habe mir heute ein Contao 5.3 installiert, dazu hab ich die Contao Official Demo installiert.
Da ich gerne eine Onepage Website erstellen möchte hab ich auch die Erdmann onepage-navigation insalliert.

Ich hab es hinbekommen dass ich als Navigation nun die einzlnen Artikel angezeigt bekomme, jetzt frage ich mich wie man bei der C5.3 einen Sticky Header hinbekommt, ist das Script von oben auch für C5+ verwendbar?

Oder muss man da einen anderen Weg gehen?

Ich würde mich freuen wenn ihr mir dabei helfen könntent.

Danke

[zoglo]

ist das Script von oben auch für C5+ verwendbar?

Das Skript benötigt jQuery, dieses muss also aktiviert sein.
Wenn es nach Aktivierung nicht funktioniert, sollte man immer einen Link zur Seite posten + Screenshots der Einstellungen + dem genutzten Skript.

Wenn die benötigten Informationen zur Lösungsfindung nicht geposted werden, kann hier leider nicht geholfen werden.

[Schnubi]

Danke für die Antwort, ich habe das Script noch garnicht eingebunden, es war eigentlich die grundsätzliche Frage ob dieses Script C4 bezogen ist oder auch bei C5 verwendet werden kann.

Ich gehe davon aus das bei einem so großen Versionssprung 4 > 5 oftmals kommplett anders aufgebaute Strukturen vorhanden sind und deswegen die Frage.

[mlweb]

Einfach selbst ausprobieren kann manchmal hilfreich sein. Wenn es nicht funktioniert baust Du es wieder aus oder postest den Link, postest die Fehlermeldungen und bittest um Hilfe.

Es handelt sich ja hier nicht um ein Standard-Script von Contao. Wenn ich Dir also eine Auskunft geben wollen würde, würde ich es in einer möglichst "unberührten" Testversion einbauen müssen, inklusive der Erweiterung One-Pager-Navigation und dann schauen, ob das passt. Das sind aber Dinge, die Du m.E. selbst machen solltest.