Почему данные скрипты не работают в Google Chrome, Opera

Question

if(window.addEventListener) {
 window.addEventListener('scroll', swimHeader);
} else {
 window.attachEvent('onscroll', swimHeader);
}
function swimHeader(event) {
 var header = document.querySelector('header');
 var headerStyle = header.style;
 var neibourElement = document.querySelector('.your_invetnory');
 if (event.pageY >= 160) {
  headerStyle.position = 'fixed';
  headerStyle.top = '0';
  headerStyle.left = '0';
  headerStyle.width = '100%';
  headerStyle.zIndex = '1000';
  headerStyle.animation = 'headerOpacity 1s 1 ease';
  neibourElement.style.paddingTop = '78px';
  console.log(neibourElement);
 } else {
  headerStyle.position = 'static';
  neibourElement.style.paddingTop = '0';
  headerStyle.animation = '0';
 }
}

<header>
  <div class="container">
   <div class="row desktop_header">
    <div class="col-lg-4 col-md-4 col-sm-4 col-3">
     <div class="logo">
      <a href="index.html"><img src="img/logo.png" alt="logotype skinplus"></a>
     </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-6">
     <div class="top_sites">
      <a href="top_csgo/top_csgo.html">ТОП CS:GO</a>
      <a href="top_pubg/top_pubg.html">ТОП PUBG</a>
     </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-3">
     <div class="social_net_language">
      <div class="header_social">
       <a href="#"><i class="icon-vk-gray"></i></a>
       <a href="#"><i class="icon-youtube-gray"></i></a>
      </div>
      <div class="language">
       <p>RU</p>
       <div class="drop-down_language">
        <img src="img/russia_lang.png" alt="Русский язык">
        <div class="hidden_drop-down_language">
         <a href="vk.com"><img src="img/english_lang.png" alt="Englisg language"></a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="row mobile_header_lang">
   <div class="col-6">
    <div class="logo">
     <a href="index.html"><img src="img/logo.png" alt="logotype skinplus"></a>
    </div>
   </div>
   <div class="col-6">
    <div class="social_net_language">
     <div class="header_social">
      <a href="#"><i class="icon-vk-gray"></i></a>
      <a href="#"><i class="icon-youtube-gray"></i></a>
     </div>
     <div class="language">
      <p>RU</p>
      <div class="drop-down_language">
       <img src="img/russia_lang.png" alt="Русский язык">
       <div class="hidden_drop-down_language">
        <a href="vk.com"><img src="img/english_lang.png" alt="Englisg language"></a>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="row mobile_header_top_sites justify-content-center">
   <div class="col-12">
    <div class="top_sites">
     <a href="top_csgo/top_csgo.html">ТОП CS:GO</a>
     <a href="top_pubg/top_pubg.html">ТОП PUBG</a>
    </div>
   </div>
  </div>
 </header>

Имеется такой самописный скрипт для плавающей шапки, в Firefox работает, а в Opera и Google Chrome не работает, в чем может быть проблема?

вы могли бы продемонстрировать полный пример с html + css? — Valera Checha, Mar 22 '18 at 20:00
@ValeraChecha, Скинуть не могу, т.к. там в шапке и иконки и др. — uzi_no_uzi, Mar 22 '18 at 20:10
Иконки и др. не нужны, хватит самого блока шапки и его окружение. — Stepan Kasyanenko, Mar 23 '18 at 04:44

score 1 · Accepted Answer · answered Mar 26 '18 at 05:44

Дело в том, что свойство pageY принадлежт событиям мыши, и должно содержать координаты мыши.

Если вы хотите узнать координаты прокрутки, для этот есть свойства scrollTop или pageYOffset.

Пример

window.addEventListener('scroll', swimHeader);
function swimHeader(event) {
  var header = document.querySelector('header');
  var headerStyle = header.style;
  var top = window.pageYOffset || document.documentElement.scrollTop
  if (top > 160) {
    headerStyle.position = 'fixed';
    headerStyle.top = '0';
    headerStyle.left = '0';
    headerStyle.width = '100%';
    headerStyle.zIndex = '1000';
    headerStyle.animation = 'headerOpacity 1s 1 ease';
  } else {
    headerStyle.position = 'static';
    headerStyle.animation = '0';
  }
}

<header>
  <div class="container">
    <div class="row desktop_header">
      <div class="col-lg-4 col-md-4 col-sm-4 col-3">
        <div class="logo">
          <a href="index.html"><img src="img/logo.png" alt="logotype skinplus"></a>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-6">
        <div class="top_sites">
          <a href="top_csgo/top_csgo.html">ТОП CS:GO</a>
          <a href="top_pubg/top_pubg.html">ТОП PUBG</a>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-3">
        <div class="social_net_language">
          <div class="header_social">
            <a href="#"><i class="icon-vk-gray"></i></a>
            <a href="#"><i class="icon-youtube-gray"></i></a>
          </div>
          <div class="language">
            <p>RU</p>
            <div class="drop-down_language">
              <img src="img/russia_lang.png" alt="Русский язык">
              <div class="hidden_drop-down_language">
                <a href="vk.com"><img src="img/english_lang.png" alt="Englisg language"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row mobile_header_lang">
    <div class="col-6">
      <div class="logo">
        <a href="index.html"><img src="img/logo.png" alt="logotype skinplus"></a>
      </div>
    </div>
    <div class="col-6">
      <div class="social_net_language">
        <div class="header_social">
          <a href="#"><i class="icon-vk-gray"></i></a>
          <a href="#"><i class="icon-youtube-gray"></i></a>
        </div>
        <div class="language">
          <p>RU</p>
          <div class="drop-down_language">
            <img src="img/russia_lang.png" alt="Русский язык">
            <div class="hidden_drop-down_language">
              <a href="vk.com"><img src="img/english_lang.png" alt="Englisg language"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row mobile_header_top_sites justify-content-center">
    <div class="col-12">
      <div class="top_sites">
        <a href="top_csgo/top_csgo.html">ТОП CS:GO</a>
        <a href="top_pubg/top_pubg.html">ТОП PUBG</a>
      </div>
    </div>
  </div>
</header>

<div style="height:1000px;width:100%;background-color:gray;">

</div>

<div style="height:1000px;width:100%;background-color:red;">

</div>

<div style="height:1000px;width:100%;background-color:green;">

</div>

Почему данные скрипты не работают в Google Chrome, Opera

1 Answers1