下面是详细讲解“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() {
// 加入购物车逻辑
});
当页面滑动到商品列表时,购物车按钮会出现,点击按钮可执行加入购物车逻辑。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js 右侧浮动层效果实现代码(跟随滚动) - Python技术站