Slide in div on scroll with fixed height

Question

everybody. I have a problem and I hope that someone can help me out. I have this project and I need to move red div to left (you can see the code below) when user scroll down and when he scrolls up to move to the right. Point is that site is a fixed height and it must not have scrollbar. JS must detect scroll not page height. I tried everything I could find and spend almost one week on this problem If it could be responsive that would be great if not its OK.

Here is the link ------> jsfiddle or codepen I have placed a button just so you can see what effect I wish to achieve.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <title>Document</title>
    </head>
    <style>
      body{
            overflow: hidden;
            margin: 0;
            padding: 0;
          }
      #blue{
            background: blue;
            width: 100%;
            height:50vh;
            position: absolute;
            bottom: 0;
           }

       .red{
            background: red;
            width: 2000px;
            height: 500px;
            position: absolute;
            /* position to be changed to 1000px */
            left: 2000px;
            transition: 2s ease-in-out;
           }
    </style>

    <body>
      <button onclick="slide()">press</button>
      <div id="move" class="red">red</div>
      <div id="blue">blue</div>

    <script>
        function slide(){
        let moveRed = document.getElementById('move');
        if(moveRed.style.left=='2000px'){
        moveRed.style.left = '500px';
        }else{
        moveRed.style.left = '2000px';
       }
       }
    </script>
    </html>

Thanks and have a great day or night :)

Answer 1

You can create a separate function to handle the scroll event and use the window.onwheel() method to track mouse scrolling over the page.

I added || moveRed.style.left == '' || moveRed.style.left == '' to your if statement:

if(moveRed.style.left=='2000px' || moveRed.style.left == '')

since .style.left for <div id="move"> has an empty value at the beginning.

Note: I also added CSS transition support for some other browsers.

Here is the code: (run the snippet at the bottom to test)

 window.onwheel = wheelslide; // window scroll function function wheelslide(e) { var moveRed = document.getElementById('move'); // scrolling downward if(e.deltaY > 0) { if(moveRed.style.left == '2000px' || moveRed.style.left == '') moveRed.style.left = '500px'; } else { if(moveRed.style.left == '500px') moveRed.style.left = '2000px'; } } // button function function slide() { let moveRed = document.getElementById('move'); if(moveRed.style.left=='2000px' || moveRed.style.left == '') { moveRed.style.left = '500px'; } else { moveRed.style.left = '2000px'; } }

 body{ overflow: hidden; margin: 0; padding: 0; } #blue{ background: blue; width: 100%; height:50vh; position: absolute; bottom: 0; } .red{ background: red; width: 2000px; height: 500px; position: absolute; left: 2000px; transition: 2s ease-in-out; -moz-transition: 2s ease-in-out; -webkit-transition: 2s ease-in-out; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <title>Document</title> </head> <body> <button onclick="slide()">press</button> <div id="move" class="red">red</div> <div id="blue">blue</div> </body> </html>

Slide in div on scroll with fixed height

Question

1 answers

solution1
0 ACCPTED 2018-01-11 18:29:27

Slide in div on scroll with fixed height

Question

1 answers

solution1 0 ACCPTED 2018-01-11 18:29:27

solution1
0 ACCPTED 2018-01-11 18:29:27