js固定页面底部悬浮框特效代码
时间: 2023-06-17 17:07:44 浏览: 78
以下是一个基于JavaScript和CSS实现的固定页面底部悬浮框特效的代码示例:
HTML代码:
```
<div class="floating-box">这是一个底部悬浮框</div>
```
CSS代码:
```
.floating-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
padding-top: 15px;
box-sizing: border-box;
transition: all 0.3s ease;
}
.floating-box:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
```
JavaScript代码:
```
// 获取悬浮框元素
var floatingBox = document.querySelector(".floating-box");
// 监听窗口滚动事件
window.onscroll = function() {
// 获取页面滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果页面滚动高度大于等于窗口高度,显示悬浮框
if (scrollTop >= window.innerHeight) {
floatingBox.style.display = "block";
} else {
floatingBox.style.display = "none";
}
}
```
这段代码实现了一个底部悬浮框,在页面滚动到一定高度时自动显示,并且在鼠标悬浮时有一个简单的动画效果。你可以根据实际需求修改CSS样式和JavaScript代码来实现不同的效果。