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子元素相对父元素进行定位的实现

    当我们需要将一个子元素相对于其父元素进行定位时,我们可以使用CSS的定位属性。在CSS中,有以下属性可以用来实现子元素相对父元素进行定位: position: relative; – 用于将子元素相对于父元素进行定位。该属性可以将元素定位到其正常位置之上,同时其他元素仍然占据其正常位置。 top, bottom, left, right – 用于控制相应的方…

    css 2023年6月9日
    00
  • 详解使用JS如何制作简单的ASCII图与单极图

    制作ASCII图与单极图的过程中,需要使用JavaScript来控制图形及其各种细节。下面是制作简单ASCII图和单极图的完整攻略: 制作ASCII图 第一步:创建一个HTML文件 首先,需要创建一个HTML文件,并在文件中添加必要的CSS和JavaScript代码。在HTML中,创建一个<div>元素,用于存储ASCII图,设置id为“asci…

    css 2023年6月11日
    00
  • CSS颜色设置方法详解

    CSS中颜色值的表示方法 在CSS中,我们可以使用多种方式来表示颜色值,其中最常用的方式有以下几种: 颜色名称 RGB颜色值 十六进制颜色值 HSL颜色值 颜色名称 CSS支持一些颜色名称,它们被视为标准颜色名称,例如black, white, red, green, blue等等。以下是一些常用的颜色名称: .red{ color: red; } .gre…

    Web开发基础 2023年3月20日
    00
  • vue一个页面实现音乐播放器的示例

    针对“vue一个页面实现音乐播放器”的完整攻略,我为你详细讲解如下: 前置知识 在开始进行Vue一个页面实现音乐播放器的开发前,需要具备一定的前置知识: HTML、CSS、JavaScript等基础知识 Vue框架基础知识:组件、路由等 音频DOM操作知识 步骤 创建Vue项目 首先需要创建一个Vue项目,并安装所需的依赖: vue create vue-m…

    css 2023年6月11日
    00
  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法 Vue-cli 3.0是一款非常强大的Vue.js项目脚手架工具,可以帮助我们快速搭建起一个具备Vue.js开发所需的基础配置的项目框架。本文将详细介绍如何使用Vue-cli 3.0搭建Vue项目的方法。 步骤一:安装Vue-cli 3.0 要使用Vue-cli 3.0,首先需要在本地安装Node.js环境。安…

    css 2023年6月10日
    00
  • css选择器优先级深入理解

    CSS选择器优先级深入理解 在CSS中,选择器的优先级是指当多个样式规则应用到同一个元素时,浏览器会按照一定的优先级规则来决定应用哪个样式。了解CSS选择器优先级对于编写高效、可靠的CSS样式至关重要。 优先级规则 CSS选择器优先级从高到低排列如下: !important声明:优先级最高的选择器是使用!important声明的,可以覆盖所有其他声明。 内联…

    css 2023年6月9日
    00
  • css3让div随鼠标移动而抖动起来

    下面是“CSS3让div随鼠标移动而抖动起来”的攻略: 1. 使用CSS3动画实现div随鼠标移动而抖动 CSS3动画是实现抖动效果的一种常用方式。具体的实现步骤如下: 1.1 定义样式和HTML结构 首先,我们需要定义一个style标签,用来存放CSS样式。在样式中,我们需要定义一个用来显示抖动效果的div元素,可以设置它的宽度、高度、边框、背景色等基本样…

    css 2023年6月10日
    00
  • jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    为了实现jQuery UI实现动感的圆角渐变网站导航菜单效果,需要按照以下步骤操作: 步骤一:准备工作 首先,需要确保正确安装jQuery和jQuery UI库文件,并在HTML文件中使用以下代码调用它们: <link rel="stylesheet" href="https://code.jquery.com/ui/1.…

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