js 右侧浮动层效果实现代码(跟随滚动)-前端开发

下面是详细讲解“js 右侧浮动层效果实现代码(跟随滚动)”的完整攻略。

下面是详细讲解“js 右侧浮动层效果实现代码(跟随滚动)”的完整攻略。

概述

右侧浮动层效果是一种常见的网页设计方法，可以在页面中增加活力和美观度。本文将介绍如何利用 JavaScript 实现一个滚动时跟随的右侧浮动层效果。

实现步骤

HTML

在页面中添加一个右侧浮动层的 HTML 结构：

<div class="right-float">
  <!--浮动层内容-->
</div>

CSS

为了让浮动层离屏幕又不影响其他元素布局，我们需要对它进行CSS样式设置：

.right-float {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

其中，position: fixed 表示将元素固定在页面可视范围内，不随页面滚动，top: 50% 表示将元素纵向定位在页面可视范围正中央，right: 20px 表示将元素横向定位在页面右侧离边缘 20px 的位置。transform: translateY(-50%) 用于垂直居中元素。当然，你可以根据自己的需要进行位置调整，达到最佳效果。

JavaScript 实现跟随滚动

实现浮动层跟随滚动有两种方法，分别是：

方法一：监听滚动事件

首先，我们需要获取页面滚动距离 scrollTop，然后通过 JavaScript 修改浮动层样式的 top 属性值，使其随滚动而移动。

window.addEventListener('scroll', function() {
  var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var rightFloat = document.querySelector('.right-float');
  rightFloat.style.top = (50 + scroll) + 'px';
});

其中，window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop 都用于获取页面滚动距离。因为不同浏览器处理方式不一，我们需要分别判断哪个属性可用。通过 querySelector() 方法获取 .right-float 类名的元素，并为其添加滚动事件监听函数，实现跟随滚动。

方法二：利用 CSS Sticky 实现

.right-float {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

CSS Sticky 布局适用于需要滚动的内容。它通过设置元素的 position:sticky 和 top 属性实现元素吸附在屏幕上，直到超过边缘。在我们的右侧浮动层中，设置 position:sticky 和 top:50% 即可实现滚动时自动随着页面滚动。

示例说明

示例一

我们在一篇长文章中添加一个目录导航栏，方便用户阅读。它将呈现在文章右侧，滚动页面时自动跟随。

<div class="article">
  <!--文章内容-->
</div>

<div class="right-float">
  <ul>
    <li><a href="#part1">第一部分</a></li>
    <li><a href="#part2">第二部分</a></li>
    <li><a href="#part3">第三部分</a></li>
  </ul>
</div>

CSS：

.right-float {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  padding: 20px;
  background-color: #f8f8f8;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.right-float ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.right-float li {
  margin: 10px 0;
}

JavaScript:

var rightFloat = document.querySelector('.right-float');
var rightFloatTop = rightFloat.offsetTop;

window.addEventListener('scroll', function() {
  var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var article = document.querySelector('.article');
  var articleHeight = article.offsetHeight;
  var windowHeight = document.documentElement.clientHeight;
  var scrollEnd = articleHeight - windowHeight;
  if (scroll > rightFloatTop && scroll < scrollEnd) {
    rightFloat.classList.add('fixed');
  } else {
    rightFloat.classList.remove('fixed');
  }
});

这里使用 offsetTop 方法获取 .right-float 相对于文档顶部的距离，判断滑动距离是否在 .article 部分内，是则为其添加 class，位移样式属性跟随滚动。

.fixed {
  position: fixed;
  top: 50%;
}

示例二

我们需要在商品列表页添加一个购物车的快捷入口，用户滚动浏览商品时快速加入购物车。代码实现方法类似：

<div class="product-list">
   <!-- 商品列表 -->
</div>

<div class="right-float">
   <button id="add-to-cart">加入购物车</button>
</div>

CSS:

.right-float {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.right-float button {
  display: block;
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #fff;
  color: #333;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

JavaScript:

var rightFloat = document.querySelector('.right-float');
var rightFloatTop = rightFloat.offsetTop;

window.addEventListener('scroll', function() {
  var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var productListTop = document.querySelector('.product-list').offsetTop;
  var productListHeight = document.querySelector('.product-list').offsetHeight;
  var windowHeight = window.innerHeight;
  var scrollEnd = productListTop + productListHeight - windowHeight - 20;
  if (scroll > rightFloatTop && scroll < scrollEnd) {
    rightFloat.classList.add('fixed');
  } else {
    rightFloat.classList.remove('fixed');
  }
});

var addToCart = document.getElementById('add-to-cart');
addToCart.addEventListener('click', function() {
  // 加入购物车逻辑
});