Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Contao Version 4.13.14 und ErdmannFreunde Onepage-Navigation

  1. #1
    Contao-Nutzer
    Registriert seit
    18.07.2011.
    Beiträge
    16

    Standard 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

  2. #2
    Contao-Nutzer
    Registriert seit
    18.07.2011.
    Beiträge
    16

    Standard

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

  3. #3
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

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

  4. #4
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.224
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    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
    blucomp | Webdesign & Onlinelösungen

  5. #5
    Contao-Nutzer
    Registriert seit
    18.07.2011.
    Beiträge
    16

    Standard Gelöst, vielen Dank!

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •