嵌套函数有问题，或寻求更好解决方案的指导

Question

我正在使用 bootstrap 4，我想更改徽标并缩小滚动时的导航栏，除非屏幕尺寸小于 992 像素。我相信嵌套函数可能是最好的选择，但我不能完全让它工作。

也接受其他建议。提前致谢...

我的代码如下：

function myFunction(x) {
    if (x.matches) { // If media query matches
      $('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
    } else {
      // Collapse Navbar & Change Logo on scroll
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
      $('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
    } else {
      $("#mainNav").removeClass("navbar-shrink");
      $('.navbar-brand img').attr('src','../img/eventlogo_2019.svg');
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);
    }
  }

  var x = window.matchMedia("(max-width: 991px)")
  myFunction(x) // Call listener function at run time
  x.addListener(myFunction) // Attach listener function on state changes

Answer 1

我认为这应该能让您轻松一些。在这种情况下，MyFunction 将在以下时间执行：1) 文档就绪事件，2) Window 滚动事件。

function myFunction() {
    var x = window.matchMedia("(max-width: 991px)");
    if (x.matches) { // If media query matches
        $('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
    } else {
    // Collapse Navbar & Change Logo on scroll
        if ($("#mainNav").offset().top > 100) {
            $("#mainNav").addClass("navbar-shrink");
            $('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
        } else {
            $("#mainNav").removeClass("navbar-shrink");
            $('.navbar-brand img').attr('src','../img/eventlogo_2019.svg');
        }
    }
}

// Call myFunction on document ready event
$(document).ready(myFunction);

// Call myFunction on scroll event
$(window).scroll(myFunction);

Answer 2

你真的不需要那么复杂的 JS 来实现你想要的。您可以只依赖一些 CSS 和非常小的 JS（仅用于存储滚动位置）。看看这个

// store the scroll position on the HTML element so css can react to changes
document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

html,
body {
  padding: 0;
  margin: 0;
}
<!-- use a media query to prevent the change to the header on smaller devices -->
@media only screen and (min-width: 992px) {
  <!-- You can check the data-scroll attribute on the HTML node to see if the user has scrolled and set the appropriate styles then, this add a padding to the top of the document -->
  html:not([data-scroll='0']) body {
    padding-top: 3em;
  }
  <!-- this changes the header to fixed and changes the image -->
  html:not([data-scroll='0']) header {
    position: fixed;
    top: 0;
    background-image: url(https://png.pngtree.com/thumb_back/fh260/back_pic/02/65/14/5957873074946eb.jpg);
  }
}
<!-- this is the default style for the header -->
header {
  background-image: url(https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg);
  width: 100%;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 3em;
}

h1 {
  padding: 0;
  margin: 0;
}

<!-- initialize the data-scroll attribute on the HTML element -->
<html data-scroll="0">

<head>
  <title>Sample </title>
</head>

<body>
  <header>
    <h1>
      I am your header
    </h1>
  </header>
  <section>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
    <p>
      I am your content
    </p>
    <p>
      There is a lot of me so i can scroll
    </p>
  </section>
</body>

</html>

Here 是一个 fiddle，因此您可以轻松调整 window 的大小以查看效果。

编辑 - 代码片段查看器似乎弄乱了代码，只需使用它来查看代码并在 jsfiddle 上查看它以获取工作示例。

嵌套函数有问题，或寻求更好解决方案的指导

Trouble with nested function, or looking for guidance on a better solution

javascript

nested-function

bootstrap-4