mootools smoothScroll für responsive design

[WebMarco]

Hallo liebe Foren-Gemeinde,

für die Erstellung einer OnePage-Website verwende nachfolgenden mootools-Code mit negativem Offset-Wert, um beim sanften Navigieren den Abstand vom oberen Bildschirmrand anzupassen. Dies ist erforderlich, wenn im oberen Bereich ein fixiertes Menü platziert ist, welches den Inhalt überdecken würde. Angesteuert werden die einzelnen Bereiche über das Navigationsmenü zu bestimmten #-Ankern.

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

Soweit funktioniert auch alles. Komplexer ist es nun bei dem Umstand, dass ich bei der Desktop-Variante der Webseite das Menü links stehend platziert habe und somit KEIN Abstand nach oben erforderlich ist. Bei einer kleineren Ansicht (Tablet oder Smartphone) wird das Navigationsmenü (responsive Design) dann oben und fixed platziert und es ist nun erforderlich, dass der Abstand nach oben gegeben ist.

Ich benötige quasi folgende Funktion:

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

/**
* SmoothScroll
*/
window.addEvent('domready', function()
{


    /* nachfolgend die gedachte Funktion */
    /* Bei Desktop-Auflösung Abstand = 0 */
    /* Bei Tablet oder Smartphone-Auflösung Abstand = 100 Pixel */
    if @media only screen and (max-width: 767px) {
    var offsetY = 100; /* Abstand in Pixel */
    }
    else {
    var offsetY = 0; /* Abstand in Pixel */
    }


    new Fx.SmoothScroll(
    {
       duration: 800,
       offset: {'y':-offsetY}
    });
});

/* ]]> */
</script>

Leider habe ich von JavaScript bzw. mootools keine Ahnung. Habe auch schon mit Hilfe von http://stackoverflow.com/questions/15464258/convert-responsive-menu-from-jquery-to-mootools-1-4-x ein wenig probiert, ging aber alles nicht.

Für einen kleinen Hinweis bin ich wirklich dankbar.

 

[Sempervivum]

Das hier

@media only screen and (max-width: 767px)

ist CSS-Syntax.
In Mootools müsste es so gehen:

if (window.getSize().x < 768)

(siehe hier: http://www.xpertdeveloper.com/2013/01/get-browser-viewport-size-with-javascript/)