0

my goal is to stop a div from scrolling that has a position: fixed in the center of section two. I have found some answers, but they use jQuery. Is there a way to achieve this in JavaScript or CSS without jQuery? Thanks in advance.

section{
  height: 100vh;
  overflow: hidden;
}

.one{
  background-color: greenyellow;
}

.two{
  background-color: red;
}

.three{
  background-color: aqua;
}
.parent{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center ;
  align-items: center;
}
.square{
  width: 100px;
  height: 100px;
  background-color:blue;
  position: fixed;
  
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Stop-Scroll</title>
  <link rel="stylesheet" href="style.css">


<body>
<section class="one"> 
  <div class="parent">
<div class="square"></div>
 </div>
</section> 

<section class="two">

</section>

<section class="three">
  
</section>
  
  <script  src="script.js"></script>

</body>
</html>
Jen
  • 39
  • 5
  • 1
    The answer is “yes”. If jQuery can do this - which is written in Javascript - then you can do this with Javascript. – Klaassiek Jul 18 '23 at 17:24
  • @Klaassiek Any ideas on where to begin to achieve this? – Jen Jul 18 '23 at 17:43
  • Look at how jQuery does this. – Klaassiek Jul 18 '23 at 17:45
  • It would help if you posted the jQuery solution that you found. Then someone can “translate” that to Javascript without jQuery. – Klaassiek Jul 18 '23 at 17:46
  • Btw: I don’t get what the problem is. The blue block doesn’t scroll. It is fixed. What do you mean by scrolling? Maybe you mean the bouncing effect on mobile browsers? – Klaassiek Jul 18 '23 at 17:56
  • You are correct, the blue square does not scroll but because it is fixed it appears as if its moving down the page when you scroll (at least to me). I just have to figure out how to make it stick once it reaches the middle of section two. – Jen Jul 18 '23 at 18:03
  • So, it’s a matter of definition. We agree then that the blue does not scroll with the page? But that it seems like it moves down with the page when you scroll the page? – Klaassiek Jul 18 '23 at 18:52
  • Check this answer: https://stackoverflow.com/a/487124/2288476 – Klaassiek Jul 18 '23 at 19:05
  • @Klaassiek Thank you for your help. I am a beginner in JavaScript and I am still trying to understand the language in general. So I can't confirm if the link you gave helps or not for my original intention of having the div stick once the scroll gets to the middle section two. For me I would need to see the code ruining to follow along with the JavaScript. None the less I will try my best to analyze it. Thanks again. – Jen Jul 18 '23 at 20:07

0 Answers0