js实现图片跟随页面滑动

很高兴回答你的问题。可以使用 JavaScript 监听页面滚动事件，然后根据页面滚动的距离，设置图片的位置，让它跟随页面滑动。具体实现可以参考以下代码：

window.addEventListener("scroll", function() {
  var scrollY = window.scrollY;
  var img = document.getElementById("follow-img");
  img.style.top = scrollY + "px";
});

其中，"follow-img" 是图片的 id。这样，当页面滚动时，图片就会跟随页面滑动，保持在页面的相对位置不变。希望对你有帮助。

相关问题

用javascript写一个侧边栏跟随页面滑动事件代码

以下是一个简单的JavaScript代码示例，可以实现侧边栏跟随页面滑动事件：

// 获取侧边栏和页面主体元素
const sidebar = document.querySelector('#sidebar');
const mainContent = document.querySelector('#main-content');

// 监听窗口滚动事件
window.addEventListener('scroll', () => {
  // 获取当前窗口滚动的垂直距离
  const scrollTop = window.scrollY;

  // 将侧边栏固定在页面顶部
  if (scrollTop >= mainContent.offsetTop) {
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
  } else {
    sidebar.style.position = 'static';
  }
});

在这个例子中，我们首先获取了侧边栏和主体元素的引用。然后，我们通过`window`对象的`scroll`事件监听器来检测窗口的滚动事件。每次滚动事件发生时，我们获取当前窗口滚动的垂直距离，然后根据页面主体元素的位置来决定是否将侧边栏固定在页面顶部。

如果当前窗口滚动的距离大于等于页面主体元素的垂直偏移量，就将侧边栏的`position`属性设置为`fixed`，并将其`top`属性设置为`0`。这样就可以将侧边栏固定在页面顶部了。如果窗口滚动的距离小于页面主体元素的垂直偏移量，那么就将侧边栏的`position`属性设置为`static`，这样它就可以跟随页面滚动了。

html 导航栏跟随页面往下滑动

要实现导航栏跟随页面往下滑动，可以使用CSS的position属性和JavaScript的scroll事件结合实现。

首先，在CSS中设置导航栏的position为fixed，这样导航栏就会固定在页面的顶部，不会随页面滑动而消失。

然后，在JavaScript中监听页面的scroll事件，当页面滑动时，判断页面滑动的距离是否大于导航栏的高度，如果大于，则设置导航栏的top值为0，让它固定在页面顶部；否则，设置导航栏的top值为负的导航栏高度，让它隐藏在页面顶部。

以下是示例代码：

HTML：

<div class="navbar">导航栏</div>
<div class="content">
  <!-- 页面内容 -->
</div>

CSS：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  z-index: 999;
}

JavaScript：

var navbar = document.querySelector('.navbar');
var navbarHeight = navbar.offsetHeight;

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop >= navbarHeight) {
    navbar.style.top = 0;
  } else {
    navbar.style.top = -navbarHeight + 'px';
  }
});

这样就可以实现导航栏跟随页面往下滑动了。