Question

我试图在使用CSS JS和HTML传递页面的某个点之后获得一个固定的位置。另外我不知道将函数加载到html doc中的赌注方法，我正在考虑使用onload ...

这是我到目前为止所做的事情：

<!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>

Answer 1

<强> DEMO

当您尝试访问ID为left1的div时，DOM不可用。

因此，您的第一行var left1 = document.getElementById("left1");会出错。

而是将当前代码包装在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>

否则，将您的javascript放在</body>标记

上方

Answer 2

您必须在创建DOM后加载脚本。您尝试解析var left1 =document.getElementById("left1"); DOM的时间尚未创建，因此var left1为空

TRY：

<!DOCTYPE html>
<html>
    <head>
        <style>
           //YOUR CSS
        </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>
 <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">
    </body>
</html>

编辑：

通过更改position，您必须重新排列项目。

尝试：

function onScroll(e) {
    if (window.scrollY >= origOffsetY) {
        left1.style.position = "fixed";
        left1.style.left = "66px"
    } else {
        left1.style.position = "absolute";
        left1.style.left = "0px";
    }
}

DEMO

Answer 3

是的，您可以使用onload在页面加载后调用 功能，如下所示：

<script type="text/javascript"> function onLoad(){ 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>

并替换

<body>

使用：

<body onload="onload()">

请注意，您仍然可以将脚本留在页面标题中（<head>和</head>之间）。

如果您不喜欢window.addEventListener()，可以使用<body onload="onload">，但IE不支持此功能。有关详细信息，请参阅 "Hook a javascript event to page load" 。

使用JavaScript修复位置更改

3 个答案: