我正在尝试将侧面菜单插件(Responsive Menu)正确实现为wordpress主题。根据{{3}}的答案,我设法实现了一种方法,当推式菜单打开时,body
会在滚动状态下锁定(header
的所有元素都是固定的),除了交互式链接class=edge-ils edge-ils-with-scroll edge-ils-light
仍然会在推式菜单打开时变为Up。
我已将该序列保存到congrim.js
文件中,并将脚本排入functions.php
文件中的主题:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
}
/* I've implemented `onclick="lockScroll();"` in button element,
* using this sequence in the same congrim.js file:
*/
$(document).ready(function() {
$('#responsive-menu-pro-button').click(function() {
lockScroll();
});
});
删除jQuery换行将不会在浏览器控制台中给出任何错误(在Chrome中进行了测试)可能仍然是将代码换成wordpress(?)的一种不好的方法。
不幸的是,在这些情况下,overflow: hidden;
不适用,在推式菜单打开时,我无法在CSS文件/节中使用此类:
.lock-scroll {
overflow: hidden;
}
该代码仅允许我使用
.lock-scroll {
position: fixed;
}
问题:
是否有可能强制代码实现 解决方法,以使交互式链接overflow: hidden;
*或任何其他class=edge-ils edge-ils-with-scroll edge-ils-light
不会在推入式菜单中打开,保持固定在打开菜单之前单击查看器的位置?
请仅关注交互式链接问题,其余场景都很好(header
和logo
就位,其背景图片的行为也应如此)。
LE:* {overflow: hidden;
}在显示/隐藏滚动条期间,似乎会在菜单打开/关闭时产生不必要的body
移位效果,这在此阶段没有发生。
LE2:外包WordPress已将congrim.js
文件替换为SO @Congrim,请参见下面的解决方案。
网站测试页body-lock.min.js
。
答案 0 :(得分:1)
请检查下面给出的解决方案。
步骤1:添加此CSS .scroll-lock{position:fixed !important;}
。
步骤2:添加此JS。
$(document).ready(function() {
var windowTop = 0;
var menuOpen = 0;
var offsetContainerList = 0;
$('#responsive-menu-pro-button').click(function() {
var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
if ($('html').hasClass('scroll-lock')) {
$('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
if (menuOpen==0) {
menuOpen = 1;
$('html').removeClass('scroll-lock');
$('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
$('html').scrollTop(windowTop); //scroll to original position
}
else {
menuOpen = 0;
}
});
}
else {
windowTop = $(window).scrollTop();
offsetContainerList = $('.edge-ils-content-table').offset().top;
$('html').addClass('scroll-lock');
$('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
}
});
});
就是这样!
答案 1 :(得分:0)
您的滚动条不是基于导航器的自然滚动条,您有一个JS交换了类来模拟滚动条(edge-appeared
,edge-up
,edge-down
)。
在推式菜单打开时,这些类将被重置,overflow-hidden
不会对此进行更改。
您需要找到哪个JavaScript正在交换这些类并阻止它这样做,我很高兴能得到进一步的帮助,但是您有如此多的JS文件,因此花很多时间来浏览所有这些文件。如果您成功制作了Minimal, Complete, and Verifiable example,请在此处发布。
答案 2 :(得分:0)
请在您的自定义js文件中添加以下代码。
jQuery('#responsive-menu-pro-button').click(function(){
var menu_active = jQuery(this).hasClass('is-active');
if(menu_active){
jQuery('body').css('position','fixed');
}else{
jQuery('body').css('position','static');
}
});
希望对您有帮助。
谢谢