如何强制 ShiftNav 在菜单打开时锁定标题（徽标）

Question

我正在尝试制作 ShiftNav 菜单插件以在源代码中应用 Lock Scroll - 又名 lock_body - 在一个新主题上，这应该使打开的右边移到右边-menu-content 锁定在 y-scroll 上 - 显然，（在以前的主题上测试过）。如果启用了 Shift Body，则此选项将起作用，我就是这样做的。

在这些情况下，锁定滚动不起作用。我尝试使用position: fixed !important; 修复header 和其他元素的位置，但是一旦左侧菜单打开，header logo 等就会在滚动时上升。

主题和插件有大量js、css、代码；我真的无法将它复制成小提琴，我不知道这样做，很抱歉离开 MCVE，但我可以提供一个实时链接，以及应该在菜单打开时产生锁定滚动的序列。

在settings.config.php 中看起来像这样（底部）

function shiftnav_get_settings_fields(){

$prefix = SHIFTNAV_PREFIX;


$main_assigned = '';
if(!has_nav_menu('shiftnav')){
    $main_assigned = 'No Menu Assigned';
}
else{
    $menus = get_nav_menu_locations();
    $menu_title = wp_get_nav_menu_object($menus['shiftnav'])->name;
    $main_assigned = $menu_title;
}

$main_assigned = '<span class="shiftnav-main-assigned">'.$main_assigned.'</span>  <p class="shiftnav-desc-understated">The menu assigned to the <strong>ShiftNav [Main]</strong> theme location will be displayed.  <a href="'.admin_url( 'nav-menus.php?action=locations' ).'">Assign a menu</a></p>';

$fields = array(


    $prefix.'shiftnav-main' => array(

        array(
            'name'  => 'menu_assignment',
            'label' => __( 'Assigned Menu' , 'shiftnav' ),
            'desc'  => $main_assigned,
            'type'  => 'html',

        ),

        ....

$fields = apply_filters( 'shiftnav_settings_panel_fields' , $fields );

$fields[$prefix.'general'] = array(

    array(
        'name'      => 'lock_body',
        'label'     => __( 'Lock Scroll', 'shiftnav' ),
        'desc'      => __( 'Lock both vertical and horizontal scrolling on site content when menu is active.  No effect if <strong>Shift Body</strong> is disabled.', 'shiftnav' ),
        'type'      => 'checkbox',
        'default'   => 'on'
    ),
);


return $fields;

在shiftnav.js 文件中我们有：

        /* Initalizers */

    initializeShiftNav: function(){

        var $body = $('body'),
            plugin = this;

        //Only enable the site once
        if( !$body.hasClass( 'shiftnav-enabled' ) ){

            $body.addClass( 'shiftnav-enabled' );
            if( shiftnav_data.lock_body == 'on' ) $body.addClass( 'shiftnav-lock' );
            if( shiftnav_data.lock_body_x == 'on' ) $body.addClass( 'shiftnav-lock-x' );

            if( shiftnav_data.shift_body != 'off' ){
                if( shiftnav_data.shift_body_wrapper != '' ){
                    $( shiftnav_data.shift_body_wrapper ).addClass( 'shiftnav-wrap' );
                }
                else{
                    $body.wrapInner( '<div class="shiftnav-wrap"></div>' ); //unique
                    $( 'video[autoplay]' ).each( function(){
                        $(this).get(0).play();
                    });
                }
            }
            else $body.addClass( 'shiftnav-disable-shift-body' );

            //Move elements outside of shifter
            $( '#shiftnav-toggle-main, #wpadminbar, .shiftnav-fixed-left, .shiftnav-fixed-right' ).appendTo( 'body' );

            var $wrap = $( '.shiftnav-wrap' );

            //Pad top
            var toggleHeight = $( '#shiftnav-toggle-main' ).outerHeight();
            $wrap.css( 'padding-top' , toggleHeight );
            if( shiftnav_data.shift_body == 'off' ) $body.css( 'padding-top' , toggleHeight );

            //Setup non-transform
            //Some browsers provide false positives for feature detection, so we have to do browser detection as well, sadly
            var fpos = false;   //falsePositive - 
            var ua = navigator.userAgent.toLowerCase();

            //Many mobile Android browsers are dumb
            if( /android/.test( ua ) ){
                fpos = true; //we're going to whitelist mobile Android browsers, so assume false positive on Android

                //always ignore old androids
                if( /android [1-3]/.test( ua ) ) fpos = true;
                //Chrome on 4+ is good
                else if( /chrome/.test( ua ) ) fpos = false;
                //Firefox on 4+ is good
                else if( /firefox/.test( ua ) ) fpos = false;

                //always allow Chrome
                //else if( /chrome/.test( ua ) ) fpos = false;
                //Android 4.4+ is okay
                //else if( /android 4.[4-9]/.test( ua ) ) fpos = false;
                //else fpos = true;
            }


            if( !shift_supports( 'transform' ) || fpos || plugin.settings.disable_transforms ){
                $body.addClass( 'shiftnav-no-transforms' );
            }


            //Setup swipe open on MAIN SHIFTNAV only
            if( shiftnav_data.swipe_open == 'on' ){
                var wrap_start_y = 0,
                    wrap_start_x = 0,
                    wrap_cur_y = 0,
                    wrap_cur_x = 0,
                    viewport_width = $( window ).width();


                if( shiftnav_data.shift_body == 'off' ) $wrap = $( 'body' );

                $wrap.on( 'touchstart' , function( e ){
                    if( plugin.settings.breakpoint && $( window ).width() > plugin.settings.breakpoint ) return;
                    wrap_start_y = e.originalEvent.changedTouches[0].pageY;
                    wrap_start_x = e.originalEvent.changedTouches[0].pageX;
                    //console.log( "START: " + wrap_start_x );
                });

                //Left edge activate on swipe from left
                if( $( '#shiftnav-main' ).hasClass( 'shiftnav-left-edge' ) ){
                    $wrap.on( 'touchmove' , function( e ){
                        wrap_cur_x = e.originalEvent.changedTouches[0].pageX;
                        //console.log( wrap_cur_x );

                        //if close to left edge 
                        if( wrap_start_x < plugin.settings.swipe_edge_proximity ){
                            e.preventDefault();

                            //if swipe more than 150
                            if( wrap_cur_x - wrap_start_x > plugin.settings.swipe_tolerance_x ){
                                wrap_cur_y = e.originalEvent.changedTouches[0].pageY;
                                if( Math.abs( wrap_cur_y - wrap_start_y ) < plugin.settings.swipe_tolerance_y ){
                                    plugin.openShiftNav( 'swipe right' );
                                    e.stopPropagation();
                                }
                            }
                        }
                    });
                }
                //Right edge activate on swipe from right
                else{
                    $wrap.on( 'touchmove' , function( e ){
                        wrap_cur_x = e.originalEvent.changedTouches[0].pageX;

                        //if we start from the edge, tell android we've got this covered
                        if( wrap_start_x > ( viewport_width - plugin.settings.swipe_edge_proximity ) ){
                            e.preventDefault();

                            //if swipe more than 150, open panel
                            if( ( wrap_start_x - wrap_cur_x > plugin.settings.swipe_tolerance_x ) ){
                                wrap_cur_y = e.originalEvent.changedTouches[0].pageY;
                                if( Math.abs( wrap_cur_y - wrap_start_y ) < plugin.settings.swipe_tolerance_y ){
                                    plugin.openShiftNav( 'swipe left' );
                                    e.stopPropagation();
                                }
                            }
                        }


                    });
                }
            }

            //Handle searchbar toggle
            $( '.shiftnav-searchbar-toggle' ).on( this.toggleevent , function( e ){
                e.stopPropagation();
                e.preventDefault();

                var $drop = $( this ).next( '.shiftnav-searchbar-drop' );

                //Close
                if( $drop.hasClass( 'shiftnav-searchbar-drop-open' ) ){
                    $drop.removeClass( 'shiftnav-searchbar-drop-open' );
                    $( 'body' ).off( 'click.shiftnav-searchbar-drop' );
                }
                //Open
                else{
                    $drop.addClass( 'shiftnav-searchbar-drop-open' );
                    $drop.find( '.shiftnav-search-input' ).focus();

                    //Close on click-off - can't do this immediately because IE is so damn dumb
                    setTimeout( function(){
                        $( 'body' ).on( 'click.shiftnav-searchbar-drop' , function( e ){
                            $( '.shiftnav-searchbar-drop' ).removeClass( 'shiftnav-searchbar-drop-open' );
                            $( 'body' ).off( 'click.shiftnav-searchbar-drop' );
                        });
                    }, 100);
                }
            });
            $( '.shiftnav-searchbar-drop' ).on( this.toggleevent , function( e ){
                e.stopPropagation();
            });
            $( '.shiftnav-searchbar-drop .shiftnav-search-input').on( 'blur' , function( e ){
                if( $( this ).val() == '' && !toggle_clicked ){
                    $( this ).parents( '.shiftnav-searchbar-drop' ).removeClass( 'shiftnav-searchbar-drop-open' );
                }
            });
            var toggle_clicked;
            $( '.shiftnav-searchbar-toggle' ).on( 'mousedown' , function( e ){
                toggle_clicked = true;
            });
            $( '.shiftnav-searchbar-toggle' ).on( 'mouseup' , function( e ){
                toggle_clicked = false;
            });


        }

        this.$shiftnav.appendTo( 'body' );

        if( this.$shiftnav.hasClass( 'shiftnav-right-edge' ) ){
            this.edge = 'right';
        }
        else this.edge = 'left';

        this.openclass = 'shiftnav-open shiftnav-open-' + this.edge;

        //Set retractor heights
        this.$shiftnav.find( '.shiftnav-submenu-activation' ).each( function(){
            var length = $( this ).outerHeight();
            $( this ).css( { 'height' : length , 'width' : length } );

            //$( this ).css( 'height' , $( this ).parent( '.menu-item' ).height() );
        });



        //Current open
        if( plugin.settings.open_current ){
            $( '.shiftnav .shiftnav-sub-accordion.current-menu-item, .shiftnav .shiftnav-sub-accordion.current-menu-ancestor' ).addClass( 'shiftnav-active' );
        }

    },

在页面index.html 也有"lock_body":"on" 这里：

    /* <![CDATA[ */
var shiftnav_data = {"shift_body":"on","shift_body_wrapper":".edge-wrapper","lock_body":"on","lock_body_x":"off","swipe_close":"off","swipe_open":"off","swipe_tolerance_x":"150","swipe_tolerance_y":"60","swipe_edge_proximity":"80","open_current":"off","collapse_accordions":"off","scroll_panel":"off","breakpoint":"","touch_off_close":"off","scroll_offset":"100","disable_transforms":"off"};
/* ]]> */

Chrome 控制台如下所示：

此时我很想知道是否有可能强制 ShiftNav 在这个新主题上应用 Lock Scroll；将它仅应用于标题和他的元素（徽标等）会很棒，换句话说，

当菜单向右展开时，将标题固定为scrollTop 的汉堡按钮会很棒。

Website testpage

Answer 1

这是由于您对包含
<div class="edge-wrapper shiftnav-wrap"> 的 -webkit-transform 和转换样式声明。 transform 创建了一个新的局部坐标系，因此徽标固定到该坐标系而不是主体。 看到这些帖子：123

Answer 2

我找到了一个很好的解决方法，它可以忽略所有-webkit-transform、转换样式声明等等。有人说：... you can’t have a fixed element inside an element that has CSS transforms applied to it; Fixed position elements will act as position:absolute within a transformed context. This is actually part of the CSS spec.

好吧，在这种特殊情况下，谈论 ShiftNav 和自定义主题，好消息是

• 是的你可以，只要你向后看图片以看到整个图片。

解决方案是从header（或其他元素，只要那里没有任何花哨的东西）中删除徽标，并将这些元素放入 ShiftNav 设置内的切换栏 > 切换内容字段中。这将允许您不受限制地使用 Shift Body 选项，您将有一个“fake header”固定，即使主 wrapp 被推送侧菜单移动，内容也是可滚动的，一切都很好，感谢这个插件。

Voilà, have a look