javascript - 显示不同的 Logo

Question

网址:http://94.23.211.70/~cairngorm/

我要执行的任务是在导航切换到滚动时固定标题导航时更改 Logo 。我曾尝试使用我通过 Google 和此处研究过的 Javascript，但似乎没有任何效果，也许我快要解决它了，但我不确定。

当您访问该链接时，您会在每个导航栏上看到两个 Logo ，我想知道是否有可能将 display:none 作为一个想法，以一种非常简单的格式解决这个问题。如果我不能通过 CSS 做到这一点，我想知道是否有办法通过页面内的内联样式来实现 display:none 因为它是静态的所以很容易做到？

我在这里尝试了各种方法，但隧道尽头没有亮光，因此除非强烈推荐 JavaScript 或其他方法，否则我将不胜感激。

开发

Answer 1

根据我在您的问题中收集到的信息，您希望导航中的 Logo 根据用户滚动到的位置进行更改。

如果他们在英雄横幅上，则显示白边 Logo ，如果他们滚动，则显示黑边 Logo 。

这需要一点 JavaScript 和 jQuery，应该可以得到你想要的输出

$(document).ready(function() {
  function checkScroll() {
    // check if the header has changed to be sticky
    if($('header').hasClass('sticky-open')) {
      // hide all logos 
      $('.fly-wrap-logo a').hide(); 
      // only show the last logo (the one with the black edge)
      $('.fly-wrap-logo a:last-child').show(); 
    } else { 
      // hide all logos
      $('.fly-wrap-logo a').hide(); 
      // only show the first logo (the one with the white edge)
      $('.fly-wrap-logo a:first-child').show(); 
    }
  }
  // Run on ready
  checkScroll();

  // Run when the page is scrolled
  $(document).scroll(function() { 
    checkScroll(); 
  });
});