Question

我正在使用引导程序4，并且要更改徽标并缩小滚动条上的导航栏，除非屏幕尺寸小于992px。我相信嵌套函数可能是最好的选择，但我无法完全发挥作用。

也接受其他建议。预先感谢...

我的下面的代码：

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）窗口滚动事件。

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是一个小提琴，因此您可以轻松调整窗口大小以查看效果。

编辑-好像片段查看器将代码弄乱了，只需要用它来查看代码并在jsfiddle上检出一个有效的示例即可。

嵌套函数有问题，或正在寻找有关更好解决方案的指导

2 个答案: