Question

Ich möchte nur meine CSS-Stil eine Variable aus Javascript lesen und den CSS "top" -Wert entsprechend einstellen. Beispiel:

$topPosition = false; 
?> 
<script language='JavaScript' type='text/javascript'> 
    function windowsHeightPixels() { 
     windowsHeight = $(window).height() 
     if (windowsHeight > 750) { 
      topPosition = false; 
      //set the $topPosition = false; 
     } 
     else { 
      topPosition = true; 
      //set the $topPosition = true;    
     } 
    } 
    windowsHeightPixels(); 
    alert ("Height is " + windowsHeight + " Top Position is " + topPosition); 
</script> 

<style> 
... 
#fixedbutton { 
    position: fixed; 
    <?php if ($topPosition === false) : ?> top: 650px; 
    <?php else : ?> top: 127px;</p> 
    <?php endif; ?> 
    ... 
} 
</style> 

Answer 1

Bearbeiten: Refaktoriert, um die Fensterhöhe beim Laden der Seite zu überprüfen.

Hier ist ein etwas anderer Ansatz, den Sie vielleicht betrachten möchten. Es benötigt keine PHP-Variable. Nach dem von Ihnen angegebenen Beispielcode gehe ich davon aus, dass Sie jQuery verwenden.

<script> 
    function windowHeightThreshold() { 
     var heightThreshold = 750; 
     return $(window).height() > heightThreshold; 
    } 
    function checkWindowHeight() { 
     var targetElement = $('#fixedbutton'); 
     if (windowHeightThreshold()) { 
      targetElement.addClass("windowHeightThreshold"); 
     } else { 
      targetElement.removeClass("windowHeightThreshold"); 
     } 
    } 

    $(window).on("resize", function() { 
     checkWindowHeight(); 
    });   
    $(document).ready(function() { 
     checkWindowHeight(); 
    }); 
</script> 

Dann für Ihre CSS:

<style> 
    #fixedbutton { 
     position: fixed; 
     top: 127px; 
    } 
    #fixedbutton.windowHeightThreshold { 
     top: 650px; 
    } 
</style>