Question

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

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

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

我在这里尝试了各种方法，但在隧道尽头没有任何亮点，所以除非强烈建议使用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

尝试此功能＆amp; 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 no 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;}

显示不同的徽标

2 个答案: