programování

Jak v Divi nastavit odsazení pro fixní menu při posunu na kotvu na stránce

Pokud na své stránce používáte fixní hlavičku a chcete ji použít v kombinaci s kotvou na stránce, může se vám stát, že narazíte na problém, kdy vám fixní menu překrývá obsah po posunu na kotvu.

V tomto článku si ukážeme dva JavaScripty, kterým problém vyřešíte.

Script můžete vložit do Divi > Nastavení šablony > Integrace > Body.

Klasické fixní menu

<script>
jQuery(function($) {
       
    window.et_pb_smooth_scroll = function( $target, $top_section, speed, easing ) {
        var $window_width = $( window ).width();

        $menu_offset = -1;

        if ( $ ('#wpadminbar').length && $window_width > 600 ) {
            $menu_offset += $( '#wpadminbar' ).outerHeight();
        }

        //fix sidenav scroll to top
        if ( $top_section ) {
            $scroll_position = 0;
        } else {
            $scroll_position = $target.offset().top - $menu_offset;
        }

        // set swing (animate's scrollTop default) as default value
        if( typeof easing === 'undefined' ){
            easing = 'swing';
        }

        $( 'html, body' ).animate( { scrollTop :  $scroll_position }, speed, easing );
    }
   
});
</script>

Fixní menu vytvořené přes Tvůrce motivů (Theme Builder)

<script>
jQuery(function($) {

window.et_pb_smooth_scroll = function($target, $top_section, speed, easing) {

var $window_width = $(window).width();

$menu_offset = -1;

var headerHeight;

if ($window_width > 980) {
headerHeight = 210;
} else if ($window_width <= 980 && $window_width > 767) {
headerHeight = 210;
} else if ($window_width <= 767 && $window_width > 470) {
headerHeight = 255;
} else if ($window_width <= 470) {
headerHeight = 275;
}


if ($('#wpadminbar').length && $window_width <= 980) {
$menu_offset += $('#wpadminbar').outerHeight() + headerHeight;
} else {
$menu_offset += headerHeight;
}

//fix sidenav scroll to top
if ($top_section) {
$scroll_position = 0;
} else {
$scroll_position = $target.offset().top - $menu_offset;
}

// set swing (animate's scrollTop default) as default value
//if (typeof easing === 'undefined') {
// easing = 'swing';
//}

$('html, body').animate({ scrollTop: $scroll_position }, speed, easing);

}
});
</script>
NÁVODY | TIPY | NOVINKY

NÁVODY | TIPY | NOVINKY

Nechte si zasílat nové články o šabloně Divi přímo do e-mailu.

You have Successfully Subscribed!

Sdílej