右侧的微信分享按钮和回到顶部按钮位置变化怎么实现

Question

如图所示的，右侧的微信分享按钮和回到顶部按钮位置变化怎么实现

Answer 1

右侧的微信分享按钮和回到顶部按钮位置变化可以通过 CSS 和 JavaScript 实现。以下是一些示例代码，供您参考：

CSS：

css
Copy
/* 初始样式 */
.share-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 80px;
}

/* 滚动时的样式 */
.scrolled .share-btn {
  bottom: 100px;
}

.scrolled .back-to-top {
  bottom: 160px;
}
JavaScript：

javascript
Copy
// 获取元素
const shareBtn = document.querySelector('.share-btn');
const backToTop = document.querySelector('.back-to-top');

// 监听窗口滚动事件
window.addEventListener('scroll', () => {
  // 如果页面已经滚动到一定位置
  if (window.scrollY > 200) {
    // 添加一个 class，用于改变元素的样式
    document.body.classList.add('scrolled');
  } else {
    // 移除该 class
    document.body.classList.remove('scrolled');
  }
});

在上面的代码中，我们使用了 CSS 和 JavaScript 来实现在页面滚动时改变微信分享按钮和回到顶部按钮的位置。首先，我们通过 CSS 设置了初始的按钮位置，并为滚动时的位置添加了不同的样式。然后，我们使用 JavaScript 监听了窗口滚动事件，并根据滚动的位置来添加或移除一个 class，该 class 用于改变按钮的样式。这样，当页面滚动到一定位置时，就会触发该 class 的添加，从而改变按钮的位置和样式。

需要注意的是，上述代码中的 class 名称和按钮的 CSS 选择器可能需要根据您的实际情况进行修改。同时，您也可以根据需要自定义按钮的样式和位置。