如何淡出Gtranslate WP插件语言选择按钮

Question

当你向下滚动页面时，我想从网页顶部淡出Gtranslate WP插件语言选择按钮，称为"switcher“。

以下是插件的主要代码：

<div class="switcher notranslate">
  <div class="selected">
    <a href="#" onclick="return false;"><img
        src="//itsabouttime.gallery/wp/wp-content/plugins/gtranslate/flags/32/en-us.png" height="32" width="32"
        alt="en" /> English</a>
  </div>
  <div class="option">
    <a href="#"
      onclick="doGTranslate('en|en');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;"
      title="English" class="nturl selected"><img
        data-gt-lazy-src="//itsabouttime.gallery/wp/wp-content/plugins/gtranslate/flags/32/en-us.png" height="32"
        width="32" alt="en" /> English</a><a href="#"
      onclick="doGTranslate('en|fr');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;"
      title="Français" class="nturl"><img
        data-gt-lazy-src="//itsabouttime.gallery/wp/wp-content/plugins/gtranslate/flags/32/fr.png" height="32"
        width="32" alt="fr" /> Français</a>
  </div>
</div>

<script>
  jQuery('.switcher .selected').click(function () { jQuery('.switcher .option a img').each(function () { if (!jQuery(this)[0].hasAttribute('src')) jQuery(this).attr('src', jQuery(this).attr('data-gt-lazy-src')) }); if (!(jQuery('.switcher .option').is(':visible'))) { jQuery('.switcher .option').stop(true, true).delay(100).slideDown(500); jQuery('.switcher .selected a').toggleClass('open') } });
  jQuery('.switcher .option').bind('mousewheel', function (e) { var options = jQuery('.switcher .option'); if (options.is(':visible')) options.scrollTop(options.scrollTop() - e.originalEvent.wheelDelta); return false; });
  jQuery('body').not('.switcher').click(function (e) { if (jQuery('.switcher .option').is(':visible') && e.target != jQuery('.switcher .option').get(0)) { jQuery('.switcher .option').stop(true, true).delay(100).slideUp(500); jQuery('.switcher .selected a').toggleClass('open') } });
</script>

<style>
  #goog-gt-tt {
    display: none !important;
  }

  .goog-te-banner-frame {
    display: none !important;
  }

  .goog-te-menu-value:hover {
    text-decoration: none !important;
  }

  .goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body {
    top: 0 !important;
  }

  #google_translate_element2 {
    display: none !important;
  }
</style>

<div id="google_translate_element2"></div>
<script>
  function googleTranslateElementInit2() { new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false }, 'google_translate_element2'); }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>

为此，我尝试使用以下脚本在您向下滚动页面时淡出语言选择按钮(“切换器”)，但我需要您的帮助才能使其在this client's website上工作。他之所以想要这种效果，是因为当你在手机上向下滚动页面时，按钮会与其他内容重叠。

<script>
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      $('.switcher').fadeOut();
    } else {
      $('.switcher').fadeIn();
    }
   });
</script>

Answer 1

你可以使用class的名字，让CSS来做淡入淡出的工作。

• 考虑使用opacity，因为您可以在其上使用transition来淡入值。
• 也可以使用pointer-events来防止在不可见时出现不必要的单击。

你可以从window.innerHeight获取视区高度的值，然后window.scrollY滚动到顶部的距离，然后比较它们，这样你就知道什么时候应用更改(例如:在主页图像/屏幕上显示切换器，然后隐藏它)。

即：

​

let switcher;

window.addEventListener("load", () => {
  switcher = document.getElementById('switcher');

  window.addEventListener("scroll", e => {
    // If we are below the home image:
    if (window.scrollY > window.innerHeight) {
      // Add the 'hidden' class if not added yet.
      if (!switcher.classList.contains('hidden')) {
        switcher.classList.add('hidden');
      }
      // Else (we are over the home image):
      // Remove the 'hidden' class if it is still here.
    } else if (switcher.classList.contains('hidden')) {
      switcher.classList.remove('hidden');
    }
  });
});

body {
  height: 300vh;
  position: relative;
}


/* A div just to visualize the home image*/

.home-image {
  background-color: dodgerblue;
  height: 100vh;
}

#switcher {
  opacity: 1;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 200ms ease;
}

#switcher.hidden {
  opacity: 0;
  pointer-events: none;
}


/* Ignore code below. */

* {
  margin: 0;
  font-size: 24px;
}

<body>
  <div class="home-image"></div>
  <button id="switcher">"Switcher"</button>
</body>

​

Answer 2

使用mCustomScrollbar Js或平滑滚动js，如下所示。

下面复制链接代码，并在看到this is work后放入代码中。

https://essesstile.com/wp-includes/js/SmoothScroll.min.js