Support » Allgemeine Fragen » Bild soll ab einer Position auf der Seite erscheinen (Plugin)

  • Hallo,

    Ich suche ein Plugin, oder Code, mit dem ich ein Bild unter Bedigungen erscheinen lassen kann.
    Konkret habe ich eine sticky Navigationbar, welche beim Laden der Seite zunächst etwa auf der Mitte des Bildschirms ist. Darüber befindet sich das Firmenlogo. In der Navigationbar soll das Logo auch enthalten sein. Da es unschön aussieht wenn das Logo doppelt zu sehen ist, soll es in der Navigationbar erst auftauchen, sobald man weiter nach unten gescrollt hat und das Hauptlogo nicht mehr sichtbar ist.

    Trigger für das Logo könnten Anchor sein oder sobald die sticky Navigationbar mitscrollt. Leider habe ich bisher nichts dazu gefunden.

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller lbpc

    (@lbpc)

    Hier der Link: https://lbpc.de/test/

    story1line

    (@story1line)

    Ich hatte vor einiger Zeit einmal einen gleichen Fall.
    Habe mit dem Plugin „Simple Custom CSS and JS“ und JavaScript gelöst. Du musst .mini-logo durch deine Klasse ersetzen und mit den Werten 100 und 120 etwas spielen. Das sind die Pixelwerte, wann dein Logo auftaucht, bzw. verschwindet.
    Per CSS erstmal das Logo ausblenden, in den Customizer oder Child Theme:
    .mini-logo {display: none;}

    In das Plugin

    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
        // Your code in here
     window.onscroll = function()
        {
        if( window.XMLHttpRequest ) {
            if (document.documentElement.scrollTop > 100 || self.pageYOffset > 120) {
                $('.mini-logo').css('display','block');
            } else if (document.documentElement.scrollTop < 100 || self.pageYOffset < 120) {
              $('.mini-logo').css('display','none');
            }
        }
    }
    });
    </script>

    Du kannst den Script auch über die functions.php im Child Theme einfügen, habe ich aber gerade nicht getestet…

    /* Beschreibung für dich */
    add_action('wp_head', 'your_function_name');
    function your_function_name(){
    if(is_front_page()) {  ?>
    HIER DEN CODE HIN
    <?php  }
    };
Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)