发布：2024/12/7 22:46:37作者：管理员 来源：本站 浏览次数：55
我的需求其实非常简单：就是在PC的页面中，右侧栏中的某个div，在浏览器滚动时当该div顶部与浏览器顶部重合，就悬停，并且悬停时不能div的宽高，当滚动距离小于div到浏览器顶部的距离，悬停恢复，效果如下图所示：
图片滚动悬停
在css3中其使用“position：sticky”这个元素就能轻松解决，但是我用的discuz系统，默认的模板，经过多次尝试，position：sticky不生效，没有办法，只能考虑使用JS来实现，sticky黏性定位真的很好用，也方便，我寻找了好多解决方法，都不满意，不能达到我预期的效果。
使用JS解决方法，主要有以下代码，html和JS两个部分，所有网站都能使用，纯JavaScript实现，不用担心浏览器的兼容性，都可以使用。
1、JavaScript部分的JS代码
首先创建一个sticky.js，并将下面的JavaScript代码放入这个js文件中：
// sticky.js
document.addEventListener('DOMContentLoaded', function() {
var targetDiv = document.getElementById('stickyElement');
var stickyTop = targetDiv.offsetTop;
var originalStyles = window.getComputedStyle(targetDiv);
var originalWidth = originalStyles.getPropertyValue('width');
function checkSticky() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop >= stickyTop) {
targetDiv.classList.add('is-sticky');
targetDiv.style.width = originalWidth;
} else {
targetDiv.classList.remove('is-sticky');
targetDiv.style.width = '';
}
}
window.addEventListener('scroll', checkSticky);
window.addEventListener('resize', function() {
stickyTop = targetDiv.offsetTop;
originalWidth = window.getComputedStyle(targetDiv).getPropertyValue('width');
});
});
接下来，在HTML文件中，在<body>标签的底部（通常在所有内容之后，但在</body>标签之前）添加一个新的<script>标签来引用你的JavaScript文件。
2、html部分的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Div Example</title>
<style>
.sticky {
transition: all 0.3s ease;
}
.is-sticky {
position: fixed;
top: 0;
width: inherit; /* 保持原始宽度 */
z-index: 999;
}
/* 其他页面样式... */
</style>
</head>
<body>
<!-- 页面其他内容 -->
<div id="stickyElement">我是要悬浮的div，滚动到顶部时我会固定并保持宽度不变</div>
<!-- 更多页面内容 -->
<!-- 引入JavaScript文件 -->
<script src="sticky.js"></script>
</body>
</html>
在使用上面 代码时要注意把html中的style中的sticky和is-sticky这两个css也拷贝过去。确保sticky.js文件位于与HTML文件相同的目录中，或者根据文件的实际位置修改src属性的值。这样，当浏览器加载HTML页面时，它会同时加载并执行sticky.js中的JavaScript代码。点赞关注，持续分享优质经验和技巧。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4