mootools smoothScroll für responsive design

**WebMarco** · 29.09.2014, 16:50

Hallo liebe Foren-Gemeinde,

ich nutze die [OnePageWebsite]-Erweiterung für die Umsetzung einer OnePage-Webseite. In dem Foren-Beitrag https://community.contao.org/de/show...rstellen/page3 wurde beschrieben, wie das moo_smoothScroll Template mit einem negativ Offset-Wert ergänzt werden kann, um den Abstand vom oberen Bildschirmrand beim herunterscrollen anzupassen:

Code:

<script type="text/javascript">
/* <![CDATA[ */

/**
 * SmoothScroll
 */
window.addEvent('domready', function() 
{
	var offsetY = 153; /* Abstand in Pixel */
	new Fx.SmoothScroll(
	{
	   duration: 800,
	   offset: {'y':-offsetY}
	});
});

/* ]]> */
</script>

Wie muss ich diesen Code anpassen, bzw. einbinden, um je nach Bildschirmbreite den negativ Offset-Wert anzupassen? Dies wird nämlich erforderlich, wenn man bspw. ein feststehendes Navigationsmenü in der linken Spalte hat, das bei einer bestimmten Bildschirmbreite dann über die gesamte Breite am oberen Rand fixiert wird. Also die Desktop-Variante hat ein Navigationsmenü link und der Abstand nach oben beträgt den Wert 0. Die Smartphone-Variante hat ein Navigationsmenü oben fixiert und der Abstand nach oben beträgt sodann den Wert 153.

Leider kenne ich mich mit Mootools nicht aus und habe auch keine für mich schlüssige Lösung gefunden. Einzig unter http://stackoverflow.com/questions/1...mootools-1-4-x habe ich die Kombination von window.addEvent('domready', function() und window.addEvent('resize', function() gefunden. Damit habe ich ein wenig rumprobiert, mir aber immer die smoothScroll-Funktion zerschossen.

Hat jemand eine Idee, wie ich die window.addEvent('resize', function() in die bestehende moo_smoothScroll integriert bekomme? Bin für jede Unterstützung sehr dankbar.

**WebMarco** · 03.10.2014, 17:09

Guten Abend,

ich habe in der Zwischenzeit ein wenig weiter experimentiert. Der vorgeschlagene Code für den Abstand nach oben funktioniert zwar, ist jedoch leider nicht auf die Funktion "Auf Scrolling reagieren" des Moduls "One-Page-Website: Navigationsmenü" abgestimmt. Diese reagiert nämlich erst dann, wenn tatsächlich der navigierte Bereich oben anstößt.

Code:

<script type="text/javascript">
/* <![CDATA[ */

/**
 * SmoothScroll
 */
window.addEvent('domready', function() 
{
	var offsetY = 153; /* Abstand in Pixel */
	new Fx.SmoothScroll(
	{
	   duration: 800,
	   offset: {'y':-offsetY}
	});
});

/* ]]> */
</script>

OnePageWebsite Version 2.2.0

Jedoch habe ich nun entdeckt, dass bei dem Navigationsmenü die <li> und <a> Tags jeweils die class="active" erhalten. Die Funktionen dafür sind in der mod_onepagewebsitenavigation.html5 und mod_onepagewebsitenavigation_jquery.html5 hinterlegt. Zu diesen beiden Dateien habe ich nun zwei Fragen:

Wo genau kann man nun einstellen, ob die mootools oder die jquery verwendet wird?
Lässt sich die Funktion, dass die Klasse active hinzugefügt wird, auch auf die Inhaltselemente übertragen?

Zu 2.: Wenn man nun bspw. dem Element ".mod_onepagewebsiteregular div.mod_article" die Klasse active ebenfalls hinzufügt, so könnte man die Inhalte ja immer dann, wenn diese per Navigation angescrollt werden per padding-top entsprechend der fixierten Navigationsleiste heruntersetzen. Sonst bliebe nur die Möglichkeit, diese dauerhaft so zu definieren, was unschöne Zwischenräume zwischen den einzelnen Bereichen zur Folge hätte.

HTML-Code:

<div class="mod_onepagewebsiteregular block">
  <ul class="level_1">
    <li id="page25" class="page page_0 even first">
    <li id="page23" class="page page_1 odd">
    <li id="page24" class="page page_2 even">
      <div class="wrapper">
        <div class="main block">
          <div id="id-1" class="mod_article active block"> <!-- active hinzufügen -->
            <div class="ce_text first last block">
              Inhalte
            </div>
          </div>
        </div>
    </li>
    <li id="page9" class="page page_3 odd last">
  </ul>
</div>

Leider fehlen mir die Kentnisse im Bereich JavaScript, sodass ich diesen Ansatz programmiertechnisch nicht umgesetzt bekomme. Denkt Ihr, dass dieser Ansatz überhaupt sinnvoll ist?

p.s.: die Erweiterung wird leider über das ER nicht mehr gewartet. Wie führt man nun korrekterweise die Updates durch? Einfach immer per FTP-Upload den kompletten Ordner onepagewebsite überschreiben?