前端 js 代码如何实现页面滚动而元素位置不变

前端JS代码实现页面滚动而元素位置不变的方法主要有使用CSS的position: fixed;属性、或是监听窗口的滚动事件然后动态修改元素的位置。其中，使用CSS固定定位是最简单的方法，可以立即让元素在视口中固定位置，无论页面如何滚动，元素都不会随之移动。这种方法非常适合用于固定导航栏、广告悬挂或者聊天界面等。

一、使用CSS固定定位

固定定位（Fixed Positioning）是CSS布局中一个非常实用的功能，通过简单的样式声明，可以使得元素固定在浏览器的可视窗口内的特定位置。比如，如果你想要固定页头或广告栏，可以如下设置CSS样式：

.fixed-element {

    position: fixed;
    top: 10px; /* 距离视口顶部的距离 */
    right: 10px; /* 距离视口右边的距离 */
}

使用fixed定位后，元素将不再随着页面滚动而移动。top、right、bottom和left属性用于控制元素距离视口边缘的位置。

固定定位的核心特点是，不受外部容器限制。这意味着无论元素在文档流中的位置如何，都可以通过固定定位使其保持在视口的一个固定位置显示。

二、监听滚动事件

另一种方法是通过JavaScript监听滚动事件，并动态调整元素位置，从而实现类似的效果。这种方法提供了更大的灵活性，可以实现一些复杂的交互式效果，比如动态改变元素大小，元素位置的初始延迟等。

window.addEventListener('scroll', function() {

    var scrollPosition = window.pageYOffset; // 获取当前滚动位置
    var element = document.getElementById('yourElementId'); // 获取你想固定位置的元素
    // 设置元素位置
    element.style.position = 'absolute';
    element.style.top = scrollPosition + 'px';
});

这段代码使用了window.pageYOffset来获取当前的滚动位置，并且通过设置元素的position和top属性让它跟随滚动条的滚动而移动。

三、结合CSS和JS优化体验

在实际开发中，使用纯CSS固定定位通常会更加高效和简单。但在某些情况下，你可能需要更高的灵活性，比如在滚动到某个特定位置时才固定元素。这时，结合JS对滚动事件进行监听和操作会更为合适。

window.addEventListener('scroll', function() {

    var header = document.getElementById('header');
    var sticky = header.offsetTop;
    if (window.pageYOffset > sticky) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
});
// CSS
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

上述代码给出了一个基本的吸顶栏实现逻辑：当页面向下滚动超过页头（header）原始位置时，header会变得固定在视口顶部，否则会复原。

通过这种方式，可以轻松地实现元素在页面滚动到某个特定点时发生样式变化的效果，这在一些交云完整展开、云可能包含图片懒加载、动态效果触发等复杂应用场景中非常有用。

四、深入理解position属性

为了更好地运用CSS定位，理解它的底层机制是十分必要的。CSS中的position属性有几种不同的值：static、relative、absolute、fixed和sticky。其中，fixed和sticky在实现页面元素固定中应用最为广泛。

• static: 是默认值，元素按照正常文档流排列。
• relative: 元素依然保留在正常文档流中，但可以相对自身的正常位置进行偏移。
• absolute: 元素脱离正常文档流，并相对于最近的非static定位的祖先元素进行定位。
• fixed: 元素脱离文档流，并相对于浏览器窗口进行定位，固定在指定位置。
• sticky: 结合了relative和fixed的特性，在特定的滚动区间内表现为固定定位。

每种定位方式有其特定的使用场景和效果，选择合适的定位方式对于实现页面中元素的布局和功能非常关键。

通过以上几种技巧和理解，即可实现前端JS代码控制页面滚动而元素位置不变的效果。对于简单的固定元素需求，推荐使用CSS的fixed定位，它不仅简单高效，而且兼容性好。对于更复杂的交互效果，则可能需要结合JavaScript进行实现。在实践中，根据实际需求选择最优的实现方法，能够提升用户体验和页面性能。

相关问答FAQs：

1. 如何让页面滚动而元素位置不变？

通常情况下，当页面滚动时，元素的位置也会随之改变。但是，我们可以通过使用一些特定的技巧来实现页面滚动而保持元素位置不变。

一种方法是使用CSS的position: fixed属性。将希望保持位置不变的元素的样式中添加position: fixed，这样即使页面发生滚动，元素的位置也会固定不动。

另一种方法是使用JavaScript来实现。通过监听页面滚动事件，在滚动时获取元素的初始位置，然后通过修改元素的样式来保持其位置。可以使用以下代码作为参考：

window.addEventListener('scroll', function() {
  var element = document.getElementById('your-element-id'); // 替换为你要保持位置不变的元素的ID
  var rect = element.getBoundingClientRect();

  // 获取元素在文档中的初始位置
  var initialTop = rect.top + window.scrollY;
  
  // 计算元素相对于视口顶部的位置差
  var offset = initialTop - window.scrollY;

  // 设置元素的样式来保持位置不变
  element.style.top = offset + 'px';
});

2. 如何实现页面滚动时元素平滑移动而非位置固定？

有时候，我们希望页面滚动时元素能够平滑移动而非保持固定位置。这可以通过CSS的transform属性来实现。

首先，我们可以使用translateY或translateX来指定元素在垂直或水平方向上的偏移量。然后，在监听页面滚动事件时，根据滚动的距离来计算并动态修改元素的transform属性。

以下是一个示例代码：

window.addEventListener('scroll', function() {
  var element = document.getElementById('your-element-id'); // 替换为你要平滑移动的元素的ID
  var rect = element.getBoundingClientRect();
  var scrollDistance = window.scrollY;

  // 计算元素在垂直方向上的偏移量
  var translateY = Math.max(scrollDistance - rect.top, 0);
  
  // 使用transform属性进行平滑移动
  element.style.transform = 'translateY(' + translateY + 'px)';
});

3. 如何实现页面滚动时元素的透明度变化而非位置固定？

如果你希望页面滚动时元素的位置不变，但是透明度可以根据滚动的位置进行变化，你可以使用CSS的opacity属性和JavaScript来实现。

首先，在元素的样式中设置一个初始的透明度值，例如opacity: 1表示完全不透明。

然后，监听页面滚动事件，根据滚动的距离来计算透明度的值，并将其应用到元素的样式中。

以下是示例代码：

window.addEventListener('scroll', function() {
  var element = document.getElementById('your-element-id'); // 替换为你要透明度变化的元素的ID
  var rect = element.getBoundingClientRect();
  var scrollDistance = window.scrollY;

  // 计算透明度的值
  var opacity = 1 - (scrollDistance - rect.top) / rect.height;
  
  // 设置元素的透明度
  element.style.opacity = opacity;
});

通过上述方法，你可以实现页面滚动时元素的透明度变化而位置保持不变的效果。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。