显示不同的标志

Question

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

我正在尝试执行的任务是在导航切换到滚动时的固定标题导航时更改徽标。我尝试使用通过 Google 和此处研究过的 Javascript，但似乎没有任何点击，也许我接近解决它的边界，但我不确定。

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

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

开发

Answer 1

根据我在您的问题中收集到的信息，您希望导航中的徽标根据用户滚动到的位置而改变。

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

这需要一点 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(); 
  });
});

Answer 2

试试这个功能和 CSS

功能

    $(document).ready(function() {
   if($('header').hasClass('sticky-open')) {
          $('.fly-wrap-logo a:first-child').hide();
          $('.fly-wrap-logo a:last-child').show();
        }

        else {
            $('.fly-wrap-logo a:first-child').show();
          $('.fly-wrap-logo a:last-child').hide();
        }
});

CSS

.fly-wrap-logo a:last-child{display:none;}

尝试只使用 css 而不使用 jquery

.fly-wrap-logo a{display:none;}
header .fly-wrap-logo a:first-child{display:inline;}
header.sticky-open .fly-wrap-logo a:first-child{display:none;}
header.sticky-open .fly-wrap-logo a:last-child{display:inline;}