Проблема с вложенной функцией или поиск руководства для лучшего решения - PullRequest
Новая
       27

Проблема с вложенной функцией или поиск руководства для лучшего решения

0 голосов
/ 07 июня 2019

Я использую загрузчик 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

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Вам действительно не нужен весь этот сложный 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>

Здесь - это скрипка, поэтому вы можете легко изменить размер окна, чтобы увидеть эффекты.

Редактировать - Похоже, просмотрщик фрагментов смешивается с кодом, просто используйте его, чтобы просмотреть код и проверить его на jsfiddle для рабочего примера.

0 голосов
/ 07 июня 2019

Я думаю, это должно облегчить вам жизнь.В этом случае 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);
...