如何在菜单打开时强制ShiftNav将页眉（徽标）锁定在适当的位置 [英] How to force ShiftNav to Lock in place the Header (Logo) on menu-open
本文介绍了如何在菜单打开时强制ShiftNav将页眉（徽标）锁定在适当的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将
在这些情况下，锁定滚动条不起作用。我试图使用 position修复，但尽快左侧菜单将打开， header 和其他元素的位置：fixed！important; 标题 徽标等将向上滚动。
主题和插件有很多 js ， css ，代码；我真的不能将它复制到小提琴中，我不知道这样做，很抱歉退出MCVE，但是我可以提供实时链接，并且应该在菜单打开时提供锁定滚动的顺序。
在 settings.config.php 中看起来像这样（底部）
function shiftnav_get_settings_fields（）{
$ prefix = SHIFTNAV_PREFIX;
$ main_assigned =’；
if（！has_nav_menu（’shiftnav’））{
$ main_assigned =‘未分配菜单’；
}
else {
$ menus = get_nav_menu_locations（）;
$ menu_title = wp_get_nav_menu_object（$ menus [’shiftnav’]）->名称；
$ main_assigned = $ menu_title;
}
$ main_assigned =‘&span class = shiftnav-main-assigned>’。$ main_assigned。’< / span> < p class = shiftnav-desc-understated>分配给< strong> ShiftNav [Main]< / strong>将显示主题位置。 < a href ='。admin_url（‘nav-menus.php？action = locations’）。’>分配菜单< / 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'=> __（'菜单处于活动状态时，锁定网站内容的垂直和水平滚动。无效如果禁用了< strong> Shift Body< / strong>。'，'shiftnav'），
'type'=>'checkbox'，
'default'=>'on'
），
）;
return $ fields;
在班次nav.js 文件，我们有：
/ *引号* /
initializeShiftNav：function（）{
var $ body = $（'body'），
plugin = this;
//只启用一次站点
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>’）; //唯一的
$（'video [autoplay]'）.each（function（）{
$（this）.get（0）.play（）;
}）;
}
}
else $ body.addClass（‘shiftnav-disable-shift-body’）;
//将元素移到移位器
$（'＃shiftnav-toggle-main，#wpadminbar，.shiftnav-fixed-left，.shiftnav-fixed-right'）.appendTo（ '身体' ）;
var $ wrap = $（``.shiftnav-wrap'）;
//顶部
var toggleHeight = $（’＃shiftnav-toggle-main’）.outerHeight（）;
$ wrap.css（'padding-top'，toggleHeight）;
if（shiftnav_data.shift_body =='off'）$ body.css（'padding-top'，toggleHeight）;
//设置非转换
//某些浏览器为特征检测提供了误报，因此我们也必须进行浏览器检测，可惜
var fpos = false; // falsePositive-
var ua = navigator.userAgent.toLowerCase（）;
//许多移动Android浏览器都很笨
if（/android/.test（ua））{
fpos = true; ///我们将把移动Android浏览器列入白名单，因此，假设在Android
上误报，//始终忽略旧的Android
if（/ android [1-3] /。test（ua ））fpos = true;
// Chrome在4+上是不错的
else if（/chrome/.test（ua））fpos = false;
// 4+版本的Firefox不错
否则if（/firefox/.test（ua））fpos = false;
//始终允许Chrome
//否则if（/chrome/.test（ua））fpos = false;
// Android 4.4+还可以
// 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-不转换'）;
}
//仅在主SHIFTNAV上滑动设置打开
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）;
}）;
//从左滑动
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（wrap_start_x< plugin.settings.swipe_edge_proximity）{
e.preventDefault（）;
//如果滑动超过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 （向右滑动）；
e.stopPropagation（）;
}
}
}
}）；
}
//从右滑动
else {
$ wrap.on（'touchmove'，function（e）{
wrap_cur_x = e。 originalEvent.changedTouches [0] .pageX;
//如果我们从边缘开始，请告诉android我们已经覆盖了
if（wrap_start_x>（viewport_width-plugin.settings。 swipe_edge_proximity））{
e.preventDefault（）;
//如果滑动次数超过150，则打开面板
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（ 向左滑动）；
e.stopPropagation（）;
}
}
}
}）；
}
}
//处理搜索栏切换
$（'.shiftnav-searchbar-toggle'）.on（this.toggleevent，function（e）{
e.stopPropagation（）;
e.preventDefault（）;
var $ drop = $（this）.next（'.shiftnav-searchbar-drop'）;
//关闭
if（$ drop.hasClass（'shiftnav-searchbar-drop-open'））{
$ drop.removeClass（'shiftnav-searchbar-drop-open '）;
$（'body'）.off（'click.shiftnav-searchbar-drop'）;
}
//打开
else {
$ drop.addClass（'shiftnav-searchbar-drop-open'）;
$ drop.find（'.shiftnav-search-input'）.focus（）;
//关闭点击关闭-无法立即执行此操作，因为IE太笨了
setTimeout（function（）{
$（'body'）.on（'click.shiftnav-searchbar-drop'，function（e）{
$（'.shiftnav-searchbar-drop'）.removeClass（'shiftnav-searchbar-drop-打开'）;
$（‘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;
//设置牵开器高度
this。$ shiftnav.find（'.shiftnav-submenu-activation'）.each（function（）{
var length = $（this ）.outerHeight（）;
$（this）.css（{'height'：length，'width'：length}）;
// $（this）.css（'高度，$（this）.parent（'.menu-item'）。height（））;
}）;
//当前打开
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应用锁定滚动此新主题；
只将标头和其元素（徽标等）应用于标题会很棒，就像汉堡一样固定标头会很棒菜单向右展开时，位于 scrollTop 的按钮。
解决方案
I找到了一个不错的解决方法，该方法将忽略所有 -webkit-transform ，转换样式声明等。有人说： ...您不能在应用了CSS转换的元素内使用固定元素；固定位置元素将充当转换上下文中的position：absolute。这实际上是CSS规范的一部分。
在这种情况下，谈论ShiftNav和自定义主题，好消息是
- 是是可以的，只要您看向后退一步的图片即可整个图片。
解决方案是从标头中删除徽标（或其他元素，只要上面没有花哨的东西），然后将这些元素放入ShiftNav设置内的切换栏>切换内容字段即可。这将允许您不受限制地使用Shift Body选项，将修复 假标题，即使主内容也可滚动wrapp 可以通过推入式菜单进行移动，这一切都得益于此插件。
I am trying to make the ShiftNav menu plugin to apply Lock Scroll - aka lock_body in source code - on a new theme, which should make the-shifted-to-the right-by-the-opened-menu-content locked on y-scroll - obviously, (tested on previous theme). This option will work if the Shift Body will be enabled, which I did.
In these conditions the Lock Scroll it doesn't work. I've tried to fix the header and other elements in position using position: fixed !important; but as soon as the left menu will open, the header logo, etc, will go up at scroll.
The theme and the plugin have plenty of js, css, code; I really can't reproduce this into a fiddle, I have no knowledge to do this, sorry to being off MCVE, but I can provide a live link, and the sequences that should produce the lock scroll at menu-open.
In settings.config.php it looks like this (the bottom part)
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;
In shiftnav.js file we have:
/* 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' );
}
},
In page index.html also we have "lock_body":"on" here:
/* <![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"};
/* ]]> */
The Chrome console looks like this:
At this point I am interested to know if there is a possibility to force the ShiftNav to apply the Lock Scroll on this new theme; it will be great to have it applied ONLY to header and his elements (logo, etc) in other words,
It will be great to have the header fixed like the burger button at scrollTop when the menu is expanded to the right.
解决方案
I've found a nice workaround that will ignore all the -webkit-transform, transform styling declarations and so on. Someone said : ... 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.
Well, in this particular case, talking about ShiftNav and a custom theme, The good news is that
- Yes you can, as long as you look at the picture having a step backward in order to see the whole picture.
The solution is to remove the logo from the header (or other elements as long as there is no facy stuff going on up there) and to put these elements into the Toggle Bar > Toggle Content Field inside the ShiftNav Settings. This will allow you to use without restrictions the Shift Body option, you will have a "fake header" fixed, the content is scrollable even if the main wrapp is shifted by the push-side menu, everything is nice, thanks to this plugin.
这篇关于如何在菜单打开时强制ShiftNav将页眉（徽标）锁定在适当的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
