Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1133062

    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 10 months, 1 week ago by  Tim.
    • This topic was modified 10 months, 1 week ago by  Tim.
    #1134776

    Hey Tim,

    Thank you for contacting us.

    The thread you linked is too long and has multiple links and codes so it is not clear exactly what you are trying to refer.

    Anyhow, if you want to make the header sticky on a mobile device please refer to the documentation.

    Don’t forget to remove your old code and refresh the cache after installing the new code.

    Best regards,
    Vinay

    #1134852

    Hello Vinay,

    Thnx for the reply is it also possible that when scrolling down/further the header disappears and appears when user stops scrolling?

    Wkr,
    Tim

    #1135564

    Hi,
    Thanks for your research and snippet, I adjusted your snippet to only work on mobile devices under 768px and tested it on my localhost which worked well, but please note that if you test it on a desktop browser and change the screen width below 768px to trigger it you may need to reload the page for it to work. This should be fine because on a real mobile device the page load will occur below the trigger.
    Try adding this code to the end of your functions.php file via ftp:

     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 );
                var width = $(window).width();
                if ((width <= 768)) {
    
    			$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;
    
                } );
            } else {}
    
    		} ( jQuery ) );
    
    	</script>
    
    <?php } );

    Best regards,
    Mike

    #1136143

    Hey Mike,

    That worked perfect big thnx!!

    Wkr,
    Tim

    #1136177
    #1136330

    Hi,
    Thank you @guenni007

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.