Нужно сделать чтобы при прокрутке страницы изменялся стиль JS

Question

При прокрутке страницы в низ, нужно чтобы к елементу phone1 применялся стиль margin-right 100px Подскажите пожалуйста в чем проблема

let phone1 = document.getElementById('blockImg');
let phone2 = document.getElementById('blockImg2');

document.addEventListener('DOMContentLoaded', () => {

    window.addEventListener(scroll, function () {
        console.log('pageYOffset');

        if(pageYOffset > 100) {
           phone1.style.marginRight = '200px';
        }
        else {
            phone1.style.marginRight = '0px';
        }
    })
})

Answer 1

const icon = document.querySelector('.icon');

document.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    icon.style.marginRight = '200px';
    icon.style.transitionDuration = '1s';
  } else {
    icon.style.marginRight = '0';
    icon.style.transitionDuration = '1s';
  }
})

.text {
  width: 500px;
}

.icon {
  display: block;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 10px;
  right: 30px;
  border-radius: 50%;
  background: rgb(255, 0, 0);
  z-index: 99;
}

 <div class="icon"></div>
  <p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex nam deleniti distinctio minus ad iste
    nobis
    sint, quos praesentium aliquam saepe odit aut dolore doloribus libero similique facilis est, fugiat molestias
    earum
    autem quia at esse. Ad perferendis veniam officiis repellat debitis fugit quod, quaerat aut quia recusandae iste
    non
    architecto accusantium voluptates nobis voluptate voluptatum totam sapiente at. Ab dicta hic itaque, repellendus,
    quod
    quos facilis illum doloribus ea autem atque eligendi neque corrupti id totam inventore. Atque commodi ipsam
    numquam
    illum iusto suscipit obcaecati, quasi explicabo quo optio voluptas tenetur voluptates assumenda officiis, possimus
    dolor soluta odio delectus?</p>
  <p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex nam deleniti distinctio minus ad iste
    nobis
    sint, quos praesentium aliquam saepe odit aut dolore doloribus libero similique facilis est, fugiat molestias
    earum
    autem quia at esse. Ad perferendis veniam officiis repellat debitis fugit quod, quaerat aut quia recusandae iste
    non
    architecto accusantium voluptates nobis voluptate voluptatum totam sapiente at. Ab dicta hic itaque, repellendus,
    quod
    quos facilis illum doloribus ea autem atque eligendi neque corrupti id totam inventore. Atque commodi ipsam
    numquam
    illum iusto suscipit obcaecati, quasi explicabo quo optio voluptas tenetur voluptates assumenda officiis, possimus
    dolor soluta odio delectus?</p>

Answer 2

phone1 и phone2 инициализируются вне слушателя DOMContentLoaded, если поместить скрипт в head, то #blockImg и blockImg2 не будут существовать, следовательно вешать стили просто не кому.
В .addEventListener первый параметр передаётся строкой.

document.addEventListener('DOMContentLoaded', function() {
  let phone1 = document.getElementById('blockImg');
  let phone2 = document.getElementById('blockImg2');

  window.addEventListener('scroll', function(e) {
    console.clear();
    console.log(pageYOffset);

    if (pageYOffset > 100) {
      phone1.style.marginRight = '200px';
    } else {
      phone1.style.marginRight = '0px';
    }
  })
})

body {
  height: calc(100vh + 100px);
}

#blockImg,
#blockImg2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-top: 150px;
}

#blockImg {
  background-color: red;
}

#blockImg2 {
  background-color: blue;
}

<div id="blockImg"></div>
<div id="blockImg2"></div>

А ещё бы я добавил флаг, чтобы условие срабатывало один раз.

document.addEventListener('DOMContentLoaded', function() {
  let isChange = false;
  let phone1 = document.getElementById('blockImg');
  let phone2 = document.getElementById('blockImg2');

  window.addEventListener('scroll', function(e) {
    console.clear();
    console.log(pageYOffset);

    if (pageYOffset >= 100 && isChange === false) {
      isChange = true;
      phone1.style.marginRight = '200px';
    } else if(pageYOffset < 100 && isChange === true) {
      isChange = false;
      phone1.style.marginRight = '0px';
    }
  })
})

body {
  height: calc(100vh + 100px);
}

#blockImg,
#blockImg2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-top: 150px;
}

#blockImg {
  background-color: red;
}

#blockImg2 {
  background-color: blue;
}

<div id="blockImg"></div>
<div id="blockImg2"></div>

БЛОГ НА HUSL

Нужно сделать чтобы при прокрутке страницы изменялся стиль JS

Ответы (2 шт):