Fix position change with JavaScript

javascript html css position

10,037

The DOM is not available when you are trying to access div with id left1.

So your first line var left1 = document.getElementById("left1"); will give error.

Instead Wrap your current code within window.onload

<script>
       window.onload = function() {     
            var left1 = document.getElementById("left1");
            var origOffsetY = left1.offsetTop;

            function onScroll(e) {
               console.log("calling scroll")
                window.scrollY >= origOffsetY ? left1.style.position = "fixed":
                left1.style.position="absolute";
            }

            document.addEventListener('scroll', onScroll);
                                  }
  </script>

Else place your javascript just above the </body> tag

10,037

Author by

Laur Stefan

Updated on June 04, 2022

Comments

Laur Stefan almost 2 years

I am trying to achive a fixed position after a certain point of the page is passed using CSS JS and HTML. Also I don't know the bet aproach in loading the function into the html doc, I was thinking on using the onload...

Here is what I have done until now:

<!DOCTYPE html>
<html>
    <head>
        <script>
            var left1 = document.getElementById("left1");
            var origOffsetY = left1.offsetTop;

            function onScroll(e) {
                window.scrollY >= origOffsetY ? left1.style.position = "fixed":
                left1.style.position="absolute";
            }

            document.addEventListener('scroll', onScroll);
        </script language="JavaScript">
        <style>
            #main {
                position: relative;
                width: 620px;
                margin: 0 auto;
                height: 1800px;
            }
            #left1{
                position: absolute;
                font-family: sans-serif;
                left: 0px;
                top: 10px;
                height: 200px;
                width: 300px;
                background-color: #F6D565;
            }
            #right1{
                position:absolute; 
                font-family: sans-serif;
                top: 10px;
                right: 0px;
                height: 300px;
                width: 300px;
                background-color: #DFFCC2;
            }
            #right2{
                position:absolute;  
                top: 320px;
                right: 0px;
                font-family: sans-serif;
                height:300px; 
                width: 300px;
                background-color: #DFFCC2;
            }
            #right3{
                position:absolute;
                top: 630px;
                right: 0px;
                font-family: sans-serif;
                height: 300px;
                width: 300px;
                background-color: #DFFCC2;
            }
        </style>
    </head>
    <body >
        <div id="main">
            <div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
            <div id="right1">bbb</div>
            <div id="right2">cccccccccccccccccccccc</div>
            <div id="right3">ddd</div>
        </div>
    </body>
</html>