Sticky header mobile

Hello,

I want to use on desktop the sticky menu like in the theme settings. In mobile view I want to use a sticky header as found here: https://kriesi.at/support/topic/mobile-menu-reveal-on-scroll-up/.

I used the last part with used url: http://wpexplorer-themes.com/total/snippets/sticky-header-scroll. But this is also for desktop and I want to use it only on mobile and the “Enfold sticky way” on desktop.

Can you help, thnx!

Used code

/*sticky header*/
add_action( 'wp_head', function() { ?>
    <style>
        .myprefix-maybe-sticky {
            position: fixed !important;
            top: -100px;
            width: 100%;
            z-index: 999;
            opacity: 0;
            background: #fff;
            transition: 0.3s all;
            box-shadow: 0 2px 3px rgba(0,0,0,0.15);
        }

        .myprefix-show {
            top: 0;
            opacity: 1;
        }
    </style>
<?php } );

add_action( 'wp_footer', function() { ?>

    <script>

        ( function( $ ) {

            'use strict';

            var $window       = $( window );
            var lastScrollTop = 0;
            var $header       = $( '#header' );
            var headerBottom  = $header.position().top + $header.outerHeight( true );

            $window.scroll( function() {

                    var windowTop  = $window.scrollTop();

                    // Add custom sticky class 
                    if ( windowTop >= headerBottom ) {
                        $header.addClass( 'myprefix-maybe-sticky' );
                    } else {
                        $header.removeClass( 'myprefix-maybe-sticky' );
                        $header.removeClass( 'myprefix-show' );
                    }

                    // Show/hide
                    if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) {
                        if ( windowTop <= headerBottom || windowTop < lastScrollTop ) {
                            $header.addClass( 'myprefix-show' );
                        } else {
                            $header.removeClass( 'myprefix-show' );
                        }
                    }

                    lastScrollTop = windowTop;

            } );

        } ( jQuery ) );

    </script>

<?php } );

• This topic was modified 5 years, 2 months ago by Tim.