[英]How to hide image of navigation menu when scroll down?
I have a menu in this site: https://matiloos.com . 我在此站点上有一个菜单: https : //matiloos.com 。 and I use the ubermenu plugin for crate the menu.
我使用ubermenu插件创建菜单。
I want to hide images of icons when scroll down and just show the texts and when page back to the top, show images . 我想在向下滚动时隐藏图标的图像,仅显示文本,而在页面返回顶部时,显示图像。
this is ubermenu code: 这是ubermenu代码:
<div id="flatsome-uber-menu" class="header-ubermenu-nav relative hide-for-medium" style="z-index: 9">
<div class="full-width">
<nav id="ubermenu-main-877-primary-4"
class="ubermenu ubermenu-main ubermenu-menu-877 ubermenu-loc-primary ubermenu-responsive-collapse ubermenu-horizontal ubermenu-transition-shift ubermenu-trigger-hover_intent ubermenu-skin-black-white-2 ubermenu-has-border ubermenu-bar-align-full ubermenu-items-align-auto ubermenu-bound ubermenu-disable-submenu-scroll ubermenu-sub-indicators ubermenu-retractors-responsive ubermenu-submenu-indicator-closes ubermenu-notouch">
<ul id="ubermenu-nav-main-877-primary" class="ubermenu-nav">
<li class="ubermenu-item ubermenu-item-type-custom ubermenu-item-object-custom ubermenu-item-1186 ubermenu-item-level-0 ubermenu-column ubermenu-column-auto">
<a class="ubermenu-target ubermenu-target-with-image ubermenu-item-layout-image_above ubermenu-content-align-center"
href="https://matiloos.dts.company/product-category/12/?v=7516fd43adaa" tabindex="0"><img
class="ubermenu-image ubermenu-image-size-full"
src="https://matiloos.dts.company/wp-content/uploads/2018/11/0012.png"
srcset="https://matiloos.dts.company/wp-content/uploads/2018/11/0012.png 512w, https://matiloos.dts.company/wp-content/uploads/2018/11/0012-413x400.png 413w"
sizes="(max-width: 512px) 100vw, 512px" width="40" alt="۰۰۱۲"><span
class="ubermenu-target-title ubermenu-target-text">لگو و ساختنی</span></a></li>
<li class="ubermenu-item ubermenu-item-type-custom ubermenu-item-object-custom ubermenu-current-menu-item ubermenu-item-home ubermenu-item-1184 ubermenu-item-level-0 ubermenu-column ubermenu-column-auto">
<a class="ubermenu-target ubermenu-target-with-image ubermenu-item-layout-image_above ubermenu-content-align-center"
href="https://matiloos.dts.company?v=7516fd43adaa" tabindex="0"><img
class="ubermenu-image ubermenu-image-size-full"
src="https://matiloos.dts.company/wp-content/uploads/2018/12/a10-min.png"
srcset="https://matiloos.dts.company/wp-content/uploads/2018/12/a10-min.png 512w, https://matiloos.dts.company/wp-content/uploads/2018/12/a10-min-413x400.png 413w"
sizes="(max-width: 512px) 100vw, 512px" width="40" alt="a10-min"><span
class="ubermenu-target-title ubermenu-target-text">عروسک و پلاش</span></a></li>
</ul>
</li>
</ul>
</nav>
</div>
do you any solution for this ? 您对此有什么解决方案?
On scroll add class and remove and u can handle to the class.
<script script= text/javascript>
$(window).scroll(function(){
if ($(window).scrollTop() >= 250) {
$('.header-ubermenu-nav').addClass('headerSticky');
}
else {
$('.header-ubermenu-nav').removeClass('headerSticky');
}
});
</script>
When you scroll its add a class 'stuck' You can hide image by targeting 'stuck' class 滚动其时,添加一个“粘滞”类,您可以通过定位“粘滞”类来隐藏图像
.stuck .ubermenu .ubermenu-content-align-center>.ubermenu-image {
display: none;
}
.stuck .ubermenu{
background: #fff;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.