元素锁定在滚动上纯JavaScript无Jquery

元素锁定在滚动上是指在网页滚动过程中，某个元素保持固定位置不动，不随滚动而移动。这在网页设计中常用于创建固定的导航栏、侧边栏或广告栏等。

实现元素锁定在滚动上的方法有多种，其中一种常见的方法是使用纯JavaScript，而不依赖于jQuery库。以下是一个简单的实现示例：

// 获取需要锁定的元素
var element = document.getElementById('fixed-element');

// 获取元素初始位置
var initialOffset = element.offsetTop;

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 获取滚动距离
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  
  // 判断滚动距离是否超过元素初始位置
  if (scrollDistance >= initialOffset) {
    // 元素超过初始位置，添加固定样式
    element.classList.add('fixed');
  } else {
    // 元素未超过初始位置，移除固定样式
    element.classList.remove('fixed');
  }
});

在上述示例中，我们首先通过getElementById方法获取需要锁定的元素，然后获取元素的初始位置offsetTop。接下来，我们通过监听scroll事件来实时获取滚动距离scrollDistance，并判断是否超过元素的初始位置。如果超过，则给元素添加一个固定样式fixed，否则移除该样式。

需要注意的是，上述示例中的fixed样式需要在CSS中进行定义，以实现元素的固定效果。你可以根据实际需求自定义该样式。

此外，腾讯云也提供了一些相关产品和服务，如云服务器、云函数、云存储等，可以帮助开发者构建和部署网站、应用程序等。你可以访问腾讯云官网了解更多详情：腾讯云。