bottom fixed bar help

Hi :slight_smile:

On this page: http://shr.globedigitaltesting.xyz/ I have added a bottom fixed bar, however I am struggling with 2 things:

1) I would like the bar to appear ONLY once the user starts to scroll, not immediately on loading

2) See screenshot. When scrolling past these blog sections there are some issues - wondering what the cause of this is / how to fix? Bar should be 'in front' of everything, if that makes sense

Cheers,

  • Jude

    Hi again Ryan Prior

    Hope all is well with you and you are keeping fine !

    1) I would like the bar to appear ONLY once the user starts to scroll, not immediately on loading

    Here is some code that can do this for you

    add_action('wp_footer', 'custom_JS') ; 
    
    function custom_JS() {
    echo <<<'JS'
    <script type="text/javascript">
    
    jQuery(document).ready(function($) { 
    
    $("#fixed-bar").fadeOut();
    
    $(window).on("scroll", function() {
        var scrollPos = $(window).scrollTop();
        if (scrollPos <= 0) {
            $("#fixed-bar").fadeOut();
        } else {
            $("#fixed-bar").fadeIn();
        }
    });
    
    }) ;
    
    </script>
    JS;
    }

    Insert that into either your theme's functions.php, or you can insert it as a mu-plugin.

    To create an mu-plugin, go to your /wp-content/ folder via FTP, and find the folder called "mu-plugins". If there is no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like (making sure the file as an extension of .php, e.g. example.php) and paste the code in there.

    You don't need to activate that plugin, as it will be always be automatically activated. Please be sure to add a PHP start tag at the beginning of the code if you insert this code as a mu-plugin, like this:

    <?php

    2) See screenshot. When scrolling past these blog sections there are some issues - wondering what the cause of this is / how to fix? Bar should be 'in front' of everything, if that makes sense

    Here is some CSS that can fix this for you.

    #fixed-bar {
        z-index: 999999;
    }

    Use a plugin like this if not sure where to put it.

    Thank you for being a WPMU DEV member and have a fantastic day !

    Cheers
    Jude

  • Adam Czajczyk

    Hello Ryan!

    Please remove the CSS code that you added (this one:

    #page-container  {
        padding-top:10px !important;
    }

    )

    and then try replacing Jude's code from his first replay with this one:

    add_action('wp_footer', 'custom_JS') ; 
    
    function custom_JS() {
    ?>
    <script type="text/javascript">
    
    jQuery(document).ready(function($) { 
    
    $("#fixed-bar").fadeOut();
    
    $(window).on("scroll", function() {
        var scrollPos = $(window).scrollTop();
        if (scrollPos <= 0) {
            $("#fixed-bar").fadeOut();
        } else {
            $("#fixed-bar").fadeIn();
        }
    });
    
    }) ;
    
    </script>
    <?php
    }

    Please note:

    - if this code resides in a "function.php" file of your theme, use it in the form given above
    - if this code resides in a separate file - mu plugin, inside the "/wp-content/mu-plugins" folder - add this as the very first line, above the entire code:

    <?php

    Let me know if that helped, please!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Ryan!

    Thanks for the video, that is really helpful!

    You are right about the conflict. The code that Jude gave (and that I updated in my recent post) shouldn't be added via theme options. The issue is that this code is partially a PHP code and that's not supported by such "custom code" option fields.

    As you are using Divi theme, adding the code to the "functions.php" file may not be the best way to go so please do it this way:

    1. remove the code from that Theme Options -> Integrations -> Add code box that you show on video
    2. create an empty file with a PHP extensions (e.g. "custom-bar-fix.php");
    3. put the code into that file, starting with opening php tag so the first line would be this:

    <?php

    and then goes my code

    4. access your server (your WP install) using FTP or cPanel File Manager tool
    5. go to the "wp-content" folder and see if there's a "mu-plugins" folder there; if there is no such folder, create it please
    6. upload the file to the "wp-content/mu-plugins" folder

    That should do the job in my opinion. Let me know please if that worked for you :slight_smile:

    Best regards,
    Adam