Как изменить левое поле div на основе прокрутки и использования javascript? - PullRequest
Новая
       7

Как изменить левое поле div на основе прокрутки и использования javascript?

0 голосов
/ 14 июля 2020

Я новичок в Javascript и CSS. У меня есть div, который будет содержать изображение. Приведенный ниже код, я собрал его по кусочкам после просмотра некоторых видео на YouTube и изучения некоторой документации, однако я уверен, что это неправильный код.

https://jsfiddle.net/0hp97a6k/

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: powderblue;
  height: 2000px;
  padding: 0 0;
}

div {
  margin: 0;
}

.headerspace {
  width: 100%;
  height: 20px;
  background-color: white;
}

.header {
  width: 100%;
  height: 300px;
  background-color: maroon;
  display: flex;
}

.logo {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 50px;
  margin-left: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="headerspace"></div>
  <div class="header">
    <div class="logo" id="logoid">
    </div>
  </div>



  <script type="text/javascript">
    let logo = document.getElementById("logoid");

    window.addEventListener('scroll', function() {
      var value = window.scrollY;

      logo.style.marginleft = value * 0.5 + 'px';
    })
  </script>

</body>

</html>

Как мне установить левое поле на основе прокрутки?

Также можно применить свойства на основе прокрутки к двум полям, например, верхнему и правому одновременно?

1 Ответ

0 голосов
/ 14 июля 2020

marginleft должно быть marginLeft в вашем javascript

<script type="text/javascript">
    let logo = document.getElementById("logoid");

    window.addEventListener('scroll', function(){
        var value = window.scrollY;

        logo.style.marginLeft = value * 0.5 + 'px';
    })

</script>

А затем, если вы хотите отредактировать левую и верхнюю границу, вы можете сделать следующее: 

<script type="text/javascript">
    let logo = document.getElementById("logoid");

    window.addEventListener('scroll', function(){
        var value = window.scrollY;

        logo.style.marginLeft = value * 0.5 + 'px';
        logo.style.marginTop = value * 0.5 + 'px';
    })

</script>
* 1006 Элемент lo go возвращается туда, где он был начат, вы должны отредактировать css вот так 
* {
margin: 0;
padding: 0;
}
body {
    background-color: powderblue;
    height: 2000px;
    padding: 0 0;
}
div{
    margin: 0;
}
.headerspace{
    width: 100%;
    height: 20px;
    background-color: white;
}
.header{
    width: 100%;
    height: 300px;
    background-color: maroon;
    display: flex;
    padding-top: 50px;
    padding-left: 50px;
}
.logo{
    width: 200px;
    height: 200px;
    background-color: red;
}

Я удалил поле из .lo go, потому что оно будет перезаписано, и добавлены эти значения в качестве заполнения в родительский (.header)

...