-1

Please view this imageLike in the image, i have made a border which is supposed to move 20px up on scrolling above and 20px down on scrolling down. The same thing has been accomplished through hover, however i am not being able to do it upon scroll. Is it possible to change what happens upon hover to scroll?? The code can be found below;

#menu-container div{
    height: 415px;
    width: 52%;
    border:1.5px solid black;
    background:transparent;
    left: 170px;
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.9s linear;
        position: relative;
        transition-delay: 0.2s;
margin-top: -120px;

}

#divi:hover{
     background:transparent;
    left: 220px;
  /*  top:35px;*/
    padding-left: -20px;
}
.menu2:hover{
     background:transparent;
    left: 70px !important;
  /*  top:-80px;*/
    padding-left: -200px;
}
<div id="menu-container" >
  <div id="divi">  <div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%"></div></div>
     
</div>

<!--   <div class="menu2" style="margin-top: -399px; margin-left: 45px;"></div> </div> -->
   <img class="ay" <a href="https://imgbb.com/"><img src="https://i.ibb.co/YTTxKc9/ab.png" width="275px" height="auto" style="margin-top: -400px; margin-left: 200px  "> </img>
FSDford
  • 448
  • 5
  • 10
Ishwor Luitel
  • 3
  • 2

1 Answers1

0

I made you an example from your code, I explained everything in the form of comments.

let cont = document.querySelector(".container")
const maxScrollTop = 395;

// onscroll property of html elements
cont.onscroll = () => {
    // your two borders
    let divi = document.querySelector("#divi");
  let menu = document.querySelector(".menu2");
    // the math, it semes complicated but not really
  /* it just maps the scrollTop value between the values that we want (between 0 and 50 with the divi and between 50 and 200 with the menu) */
  divi.style.left = `${50 - ((cont.scrollTop / maxScrollTop) * 50)}px`;
    menu.style.left = `${50 + ((cont.scrollTop / maxScrollTop) * (200 - 50))}px`;
  
};
.container{
  height: 200px;
  overflow-y: scroll;
}
/* I made it a bit bigger for better presentation */
#menu-container div{
    height: 560px;
    width: 450px;
    border: 1.5px solid black;
    background: transparent;
    left: 50px;
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.9s linear;
    position: relative;
    transition-delay: 0.2s;
    margin-bottom: -160px;
}
/* this is your hover code */
/* #divi:hover{
    background: transparent;
    left: 220px;
  
    /* top: 35px; 
    padding-left: -20px;
}
.menu2:hover{
    background: transparent;
    left: 70px !important;
    
    /* top: -80px; 
    padding-left: -200px;
} */
<!-- we need the container so the this is what we scroll not the iframe in the snipet, which I don't know if we can reach -->
<div class="container">
  <div id="menu-container" >
    <div id="divi">  
      <div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%">

      </div>
    </div>   
  </div>

  <img src="https://i.ibb.co/YTTxKc9/ab.png" width="450px" height="auto" style="margin-top: -400px; margin-left: 50px  "/>  
</div>
Scurgery
  • 241
  • 1
  • 7