向下滾動時如何隱藏導航菜單的圖像？

Question

我在此站點上有一個菜單： https : //matiloos.com 。 我使用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;
}