Question

我在此站点上有一个菜单：https://matiloos.dts.company/?v=7516fd43adaa。然后我使用ubermenu插件创建菜单。

我想在向下滚动时隐藏图标的图像，只显示文本，而在页面返回顶部时，显示图像。

这是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>

您对此有什么解决方案吗？

Answer 1

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>

Answer 2

滚动它时，添加一个类“卡住” 您可以通过定位“卡住”类来隐藏图片

.stuck .ubermenu .ubermenu-content-align-center>.ubermenu-image {
    display: none;
}
.stuck .ubermenu{
    background: #fff;
}

向下滚动时如何隐藏导航菜单的图像？

2 个答案: