首先,我的工作演示:http://desainwebsite.com/tunasteleshop/
我的问题:当你悬停类别菜单(智能手机,移动电源等)时,应该有一个显示owl-carousel子类别和图像的下拉列表(我在鼠标悬停时禁用了上滑功能,用于此调试会话).这在Firefox,Safari和Chrome(Mac和Windows)中都运行良好.但是,当你开始向下滚动时,直到标题变为position:fixed感谢它使用Waypoint jQuery新添加的'.stuck'类,在Chrome中你将开始注意到下拉内容被剪切,隐藏.
从我之前的检查中,导致这种情况的是overflow:hidden 来自其父容器的CSS样式.但是这种风格是Owl Carousel jQuery的默认风格,必须使用它才能改变它(如果删除它会破坏这个轮播的布局).
我的另一个发现是position:fixed".header-bottom"中也有这个bug的作用.当改回亲戚时,它会恢复正常,不会被剪裁.但是,当访问者滚动网站时,客户希望标题停留位置固定.所以我也无法改变这一点..
我的问题是,为什么世界上它在Firefox和Safari中运行良好而在Chrome中运行良好?这个bug究竟是什么原因造成的?它与CSS有关吗?是jQuery相关吗?还是纯粹的Chrome bug(Windows和Mac版本)?
我的jQuery用于显示下拉列表:
$(".prodnav > li").hover(function() {
$(this).children("a").addClass("opened");
$(this).find(".subnav-area").slideDown("fast");
$(".body-mask").fadeIn("fast");
});
Run Code Online (Sandbox Code Playgroud)
我的jQuery用于调用Owl Carousel:
$(".sac-owl").owlCarousel({
autoPlay: false,
items : 6,
itemsDesktop : [1199,6],
itemsDesktopSmall : [959,5],
itemsTablet: [720,4],
itemsTabletSmall : [480, 3],
itemsMobile : [320, 3],
navigation: true,
pagination: false
});
Run Code Online (Sandbox Code Playgroud)
触发Waypoint jquery:
$('.header-bottom').waypoint('sticky', {
offset: 0
});
Run Code Online (Sandbox Code Playgroud)