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:stickytop 属性实现元素吸附在屏幕上,直到超过边缘。在我们的右侧浮动层中,设置 position:stickytop: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() {
  // 加入购物车逻辑
});

当页面滑动到商品列表时,购物车按钮会出现,点击按钮可执行加入购物车逻辑。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js 右侧浮动层效果实现代码(跟随滚动) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 浅谈css position absolute相对于父元素的设置方式

    我来为你详细讲解关于CSS中position:absolute相对于父元素的设置方式的攻略。 什么是position:absolute? position:absolute是CSS中的一个定位属性,表示该元素的位置是相对于最近的已定位的父元素。如果没有已定位的父元素,则相对于html元素进行定位。absolute文档流中脱离,不占据原有的位置,可以随意的设置…

    css 2023年6月10日
    00
  • Vue实现计数器案例

    下面是Vue实现计数器案例的完整攻略。 一、编写HTML模板 首先,我们需要在HTML中编写基本的模板,用于渲染Vue实例。 <div id="app"> <p>{{ count }}</p> <button v-on:click="incrementCount">增加&…

    css 2023年6月10日
    00
  • 原生JS实现旋转轮播图+文字内容切换效果【附源码】

    下面就是原生JS实现旋转轮播图+文字内容切换效果的攻略。 1、准备工作 在开始实现之前,需要做好一些准备工作: 准备好HTML结构,最外层包裹一个容器div,用来放置轮播图和文字内容。 在HTML文件中引入相应的CSS文件和JS文件。 2、实现旋转轮播图效果 实现旋转轮播图效果的代码如下所示(注释已经解释了代码的作用): var slideIndex = 1…

    css 2023年6月10日
    00
  • 从零搭建react+ts组件库(封装antd)的详细过程

    下面是从零搭建react+ts组件库(封装antd)的详细过程: 第一步:初始化项目 首先,在命令行终端中执行以下命令,初始化一个空的npm项目: npm init -y 第二步:安装依赖 接着安装以下依赖: npm install react react-dom antd babel-loader @babel/core @babel/preset-env…

    css 2023年6月9日
    00
  • 使用CSS3实现圆角,阴影,透明

    使用CSS3,我们可以轻松实现元素的圆角、阴影和透明效果。下面是实现这些效果的攻略。 实现圆角 CSS3中提供了border-radius属性,它允许我们为元素添加圆角。border-radius属性有四个值,分别对应四个角,也可以只设置其中的几个。例如: div{ border-radius: 5px 10px 5px 10px; } 上面的代码表示左上角…

    css 2023年6月9日
    00
  • 20款覆盖全面的响应式网站设计工具

    20款覆盖全面的响应式网站设计工具攻略 在选择一个好用的响应式网站设计工具时,以下20款工具可能会给你提供参考和帮助。它们都有自己的特点和优点,可以根据需求进行选择。 1. Adobe XD Adobe XD是由Adobe公司推出的一款免费的交互式设计工具。它可以用于设计用户界面、动画和交互式原型。Adobe XD可以轻松地在不同设备和分辨率下设计您的网站。…

    css 2023年6月10日
    00
  • CSS实现3D书本效果的示例代码

    实现3D书本效果需要借助CSS3的transform属性中的rotateX、rotateY、translateZ等值。下面是一个实现3D书本效果的示例代码以及详细解释: 示例代码 <div class="book"> <div class="cover"> <div class=&quot…

    css 2023年6月10日
    00
  • 用CSS开发时髦的导航栏第二篇

    总体思路: 先用HTML定义导航栏的外框架,确定导航栏的基本结构。 使用CSS样式定义导航栏的样式,包括背景、高度、宽度以及对鼠标的交互效果等。 对选中的菜单项增加样式,以凸显当前所选项目。 对二级菜单进行样式定义并实现显示。 Step1:HTML定义导航栏的外框架 导航栏最外层是 标签,里面嵌套 标签, 标签表示每一个菜单项。 <nav> &l…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部