Question

基本上我想要一个div，当我向上或向下滚动页面时，它将移动到不同的位置。所以它可以从一开始就开始30px但是当你向下滚动它可以100px。当你向下滚动更多时，例如它将是60px。

div将位于我中间靠近中间的页面的右侧，但是当您单击链接时，页面将自动滚动并且div将移动以适应新内容。

[edit]我希望它相对于浏览器窗口，所以会修正吗？

所以我想要的是能够将顶部标签更改值作为滚动到我需要它的位置。

Answer 1

您可以创建固定的课程 .fixed{ position: fixed; } 然后在jquery中你可以添加和删除这个类取决于滚动位置。

Answer 2

您可以使用纯JavaScript执行此操作：

<强> HTML

<div id="floatingDiv"></div>

<强> CSS

#floatingDiv {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 30px;
  right: 0;
  border: 1px solid red;
  background-color: white;
}

<强>的JavaScript

window.onload = function() {

  var body = document.getElementsByTagName('body')[0],
      floatingDiv = document.getElementById('floatingDiv');

  document.onscroll = function() { 
    floatingDiv.style.top = 30 + Math.round(body.scrollTop / 10) + 'px';
  };

};

现场演示：http://jsbin.com/qewujuhu/2/edit

编辑：

工作原理

您的浮动div具有id属性（或class或任何标识符）。在CSS中，您指定它的位置是相对于浏览器窗口（position:fixed）并给它初始指标（宽度，高度等）。完全加载HTML文档后，将调用window.onload。在window.onload内，您可以找到<body>和<div id="floatingDiv">元素。之后，您定义每次滚动文档时，调用一个函数，将style的{{1}}属性设置为某个值，其中包含浮动div的新<div id="floatingDiv">。该值将覆盖CSS中的值，浏览器将div渲染到新位置。

top表示在元素中（先前在floatingDiv.style.top = 30 + Math.round(body.scrollTop / 10) + 'px';属性的文档中找到），名为id的属性（也是对象）应更改{{1一些新值的属性，即30px（你在问题中要求的初始偏移量）加上当前页面的垂直滚动位置除以10（并且舍入，因为我们想要一个整数值，而不是浮动一个）concat用字符串＆＃39; px＆＃39; （表示像素）。作为此操作的结果（在向下滚动页面180px之后），如果您将在开发工具中查看文档，您将看到如下内容：

style

滚动div时无效

2 个答案: