javascript Window.onscroll для перемещения div по вертикали - PullRequest
Новая
       14

javascript Window.onscroll для перемещения div по вертикали

0 голосов
/ 02 мая 2018

У меня есть простой скрипт: Я хочу перемещать мой div по вертикали, когда страница прокручивается, но, хотя событие запускается, div остается в той же позиции 

<script type="text/javascript">
    window.onscroll = DoScroll;
    function DoScroll() {
        var mydiv = document.getElementById("myFloatingDiv");
        mydiv.top = mydiv.top + 230;             
    }
</script>  

<style>
    body {
        background-color: linen;
        margin-left: 50px;
        margin-right:60px;
        margin-top:15px;
    }

    .myFloatingDivCSS{
        position:absolute;
        left:50px;
        top:100px;
        width:20%;
        height:300px;
        background:blue;
    }
</style> 

<body>
    <div class="myFloatingDivCSS" id="myFloatingDiv" ">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

Но я не вижу, как движется div ... Почему это происходит?

Ответы [ 3 ]

0 голосов
/ 02 мая 2018

Вот другой подход: 

function DoScroll() {
  var mydiv = document.getElementById("myFloatingDiv");
  mydiv.style.top = mydiv.offsetTop + 230 + 'px';
}
0 голосов
/ 02 мая 2018

Я нашел ответ, который хотел, спасибо всем, что здесь написал: 

window.onscroll = DoScroll;


function DoScroll() {
    var mydiv = document.getElementById("myFloatingDiv");
    mydiv.style.top = Math.max(100, window.pageYOffset) + 'px';
  }
0 голосов
/ 02 мая 2018

попробуйте это для DoScroll 

  window.onwheel= DoScroll;
  function DoScroll(e) {
    var mydiv = document.getElementById("myFloatingDiv");
    var top = window.getComputedStyle(mydiv).top;
    var delta = e.wheelDelta > 0 ? 230 : -230;
    mydiv.style.top = parseInt(top) + delta + 'px';
  }

или это 

  window.onscroll = DoScroll;
  function DoScroll() {
    var mydiv = document.getElementById("myFloatingDiv");
    mydiv.style.top = -window.pageYOffset + 230 + 'px';
  }
...