吸顶的效果：先写好一个div块，并且定位到顶部，初始时隐藏，当某个标题到达顶部时显示该div块，已达到吸顶效果。
注意：为什么不能用css自带的sticky或者直接改变块元素的属性的原因是：使用mui组件的折叠板，其各个内容块是包含了标题和内容的，并且都是相对定位的，一旦改变原有的块，则会使整个折叠板的样式变乱。
html：
<!DOCTYPE html>
<html lang=\"en\">
<head>
< charset=\"UTF-8\">
< name=\"viewport\"
content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\"/>
< rel=\"stylesheet\" href=\"../../css/mui.min.css\">
< rel=\"stylesheet\" href=\"../../css/style.css\">
< >消息-事件详情</ >
</head>
<body>
<div class=\"inDetail-page\" id=\"inDetailPage\">
<!--去顶部图标-->
<div class=\"topIcon\" id=\"inTopIcon\" v-show=\"topVisible\"></div>
<!--头部-->
<header class=\"mui-bar mui-bar-nav inDetail-header\">
<a class=\"mui-action-back mui-icon mui-icon-left-nav mui-pull-left\"></a>
<h1 class=\"mui- \">消 息</h1>
</header>
<div class=\"fixed-bar\" id=\"fixedBar\">
<p><span class=\"sub-box-pre\"></span><span id=\"fixed- \">{{fixed }}</span></p>
</div>
<!--内容-->
<div id=\"refreshContainer\" class=\"mui-scroll-wrapper\">
<!--滚动区域-->
<div class=\"mui-scroll\">
<!--标题-->
<div class=\" -box\">
<div class=\" -text\">
<p>
<span class=\"detail-icon\"></span>阅读 <span>{{readNum}}</span> | 点赞 <span>{{goodNum}}</span> | 评论数量 <span>{{commentNum}}</span>
</p>
<p>{{ }}</p>
<p>{{newsTime}}</p>
</div>
</div>
<!--内容--折叠面板-->
<div class=\"inDetail-collapse\">
<!--多个折叠板可展开的写法-->
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">事件简介</span></a>
<div class=\"mui-collapse-content\">
<p class=\"ev-info\">{{eventInfo}}</p>
</div>
</li>
</ul>
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">关键词云</span></a>
<div class=\"mui-collapse-content\">
<div id=\"wordCloud\" class=\"chart-box\"></div>
</div>
</li>
</ul>
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">关系图谱</span></a>
<div class=\"mui-collapse-content\">
<div id=\"relateSpec\" class=\"chart-box\"></div>
</div>
</li>
</ul>
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">正负面影响</span></a>
<div class=\"mui-collapse-content\">
<div class=\"influ-box\">
<div class=\"left- influ- \">正面影响 {{posNum}}%</div>
<div class=\"left-box\"></div>
<div class=\"center- influ- \">中性影响 {{neuNum}}%</div>
<div class=\"center-box\"></div>
<div class=\"right- influ- \">负面影响 {{nagNum}}%</div>
<div class=\"right-box\"></div>
</div>
</div>
</li>
</ul>
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">热门信息</span></a>
<div class=\"mui-collapse-content\">
<ul id=\"newsUl\" class=\"news-list\">
<li v-for=\"item in hotData\" :data-url=\"item.url\" :data-id=\"item.id\">
{{item.source}}：{{item. }}
</li>
</ul>
</div>
</li>
</ul>
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">渠道分析</span></a>
<div class=\"mui-collapse-content\">
<div class=\"chart-box\" id=\"chanel\"></div>
</div>
</li>
</ul>
<!--只有一个可展开折叠板的写法-->
<!--<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">事件简介</span></a>
<div class=\"mui-collapse-content\">
<p class=\"ev-info\">{{eventInfo}}</p>
</div>
</li>
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">关键词云</span></a>
<div class=\"mui-collapse-content\">
<div id=\"wordCloud\" class=\"chart-box\"></div>
</div>
</li>
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">关系图谱</span></a>
<div class=\"mui-collapse-content\">
<div id=\"relateSpec\" class=\"chart-box\"></div>
</div>
</li>
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">正负面影响</span></a>
<div class=\"mui-collapse-content\">
<div class=\"influ-box\">
<div class=\"left- influ- \">正面影响 {{posNum}}%</div>
<div class=\"left-box\"></div>
<div class=\"center- influ- \">中性影响 {{neuNum}}%</div>
<div class=\"center-box\"></div>
<div class=\"right- influ- \">负面影响 {{nagNum}}%</div>
<div class=\"right-box\"></div>
</div>
</div>
</li>
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">热门信息</span></a>
<div class=\"mui-collapse-content\">
<ul id=\"newsUl\" class=\"news-list\">
<li v-for=\"item in hotData\" :data-url=\"item.url\" :data-id=\"item.id\">
{{item.source}}：{{item. }}
</li>
</ul>
</div>
</li>
<li class=\"mui-table-view-cell mui-collapse\">
<a class=\"mui-navigate-right\" href=\"#\"><span class=\"sub-box-pre\"></span><span
class=\"sub-text\">渠道分析</span></a>
<div class=\"mui-collapse-content\">
<div class=\"chart-box\" id=\"chanel\"></div>
</div>
</li>
</ul>-->
</div>
</div>
</div>
</div>
< src=\"../../js/mui.min.js\"></ >
< src=\"../../plugin/flexible.min.js\"></ >
< src=\"../../plugin/echarts/echarts.min.js\"></ >
< src=\"../../plugin/echarts/echarts-wordcloud.min.js\"></ >
< src=\"../../plugin/vue.js\"></ >
< src=\"../../config/config.js\"></ >
< src=\"../../js/common/common.js\"></ >
< src=\"../../js/message/incidentDetail.js\"></ >
</body>
</html>
var incidentPage = new Vue({
el: \'#inDetailPage\',
data: {
: \'\', // 事件名称
dataList: [],
isSensitive: 0, // 是否是敏感事件
topVisible: false, // 向上按钮是否可见
fixed : \'\',
eventId: \'\'
},
mounted() {
var that = this;
document.addEventListener(\'plusready\', function () {
var eventId = plus.webview.currentWebview().eventId;
that.eventId = eventId;
that.initMui();
});
},
methods: {
initMui() {
mui(\'.mui-scroll-wrapper\').scroll({
scrollY: true, // 是否竖向滚动
scrollX: false, // 是否横向滚动
startX: 0, // 初始化时滚动至x
startY: 0, // 初始化时滚动至y
indicators: false, // 是否显示滚动条
deceleration: 0.0005, // flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
bounce: true // 是否启用回弹,
});
var self = this;
/**
* 绑定toTop事件
*/
document.getElementById(\'inTopIcon\').removeEventListener(\'click\', this.toTop, false);
document.getElementById(\'inTopIcon\').addEventListener(\'click\', this.toTop, false);
// self.singleExpend();
self.severalExpend();
},
/**
* 以下是当只有一个ul.mui-table-view包含了所有事件分类的情况是滚动固定的操作,即只有一个可展开时的操作
*/
singleExpend() {
var self = this;
var fixedBar = document.getElementById(\'fixedBar\');
// offsetTop是元素距离上方元素的位置
var expendEles = document.getElementsByClassName(\'mui-collapse\');
var len = expendEles.length;
/**
* 为fixedBar添加监听点击事件，如果点击的是已经打开的，则收缩，否则展开
*/
fixedBar.addEventListener(\'click\', function (e) {
if (self.hasClassName(fixedBar.getElementsByTagName(\'p\')[0], \'drop\')) {
for (let i = 0; i < len; i++) {
if (self.fixed === expendEles[i].getElementsByClassName(\'sub-text\')[0].innerText) {
expendEles[i].classList.remove(\'mui-active\');
self.toTop();
}
}
} else {
for (let i = 0; i < len; i++) {
// expendEles[i].classList.remove(\'mui-active\');
expendEles[i].getElementsByTagName(\'a\')[0].className = \'mui-navigate-right\';
if (self.fixed === expendEles[i].getElementsByClassName(\'sub-text\')[0].innerText) {
expendEles[i].classList.add(\'mui-active\');
fixedBar.style.display = \'none\';
// self.toTop();
}
}
}
});
/**
* 点击每一个li时都调用toTop
*/
mui(\'.mui-table-view\').on(\'tap\', \'li\', function (e) {
self.toTop();
});
/**
* 监听滚动事件 -- 超过10.00rem出现去顶部的按钮
*/
document.querySelector(\'.mui-scroll-wrapper\').addEventListener(\'scroll\', function (e) {
var tfStyle = document.getElementsByClassName(\'mui-scroll\')[0].style.transform;
var scrollTop = parseInt(tfStyle.split(\',\')[1].split(\'px\')[0]);
if (Math.abs(scrollTop) > 200) {
self.topVisible = true;
} else {
self.topVisible = false;
}
var top = (Math.abs(scrollTop) / 20 - 5.28); // 转换成rem单位计算
if (top > 0) {
for (let i = 0; i < len; i++) {
if (self.hasClassName(expendEles[i], \'mui-active\') && (expendEles[i].offsetTop / 20.0) <= top) {
fixedBar.style.display = \'flex\';
self.fixed = expendEles[i].getElementsByClassName(\'sub-text\')[0].innerText;
for (var j = 0; j < len; j++) {
expendEles[j].getElementsByTagName(\'a\')[0].className = \'mui-navigate-right\';
}
fixedBar.getElementsByTagName(\'p\')[0].className = self.hasClassName(expendEles[i], \'mui-active\') ? \'drop\' : \'\';
}
}
} else {
for (var k = 0; k < len; k++) {
expendEles[k].getElementsByTagName(\'a\')[0].className = \'mui-navigate-right\';
}
fixedBar.style.display = \'none\';
}
});
},
/**
* 当每个都可展开时，即用不同的ul.mui-table-view包含每一个展开块时的操作
*/
severalExpend() {
var self = this;
var fixedBar = document.getElementById(\'fixedBar\');
// offsetTop是元素距离上方元素的位置
var expendEles = document.getElementsByClassName(\'mui-table-view\');
var len = expendEles.length;
/**
* 监听滚动事件 -- 超过10.00rem出现去顶部的按钮
*/
document.querySelector(\'.mui-scroll-wrapper\').addEventListener(\'scroll\', function (e) {
var tfStyle = document.getElementsByClassName(\'mui-scroll\')[0].style.transform;
var scrollTop = parseInt(tfStyle.split(\',\')[1].split(\'px\')[0]);
if (Math.abs(scrollTop) > 200) {
self.topVisible = true;
} else {
self.topVisible = false;
}
var top = (Math.abs(scrollTop) / 20); // 转换成rem单位计算
if (top > 0) {
for (var i = 0; i < len; i++) {
if (self.hasClassName(expendEles[i].getElementsByClassName(\'mui-collapse\')[0], \'mui-active\') && (expendEles[i].offsetTop / 20.0) <= top) {
fixedBar.style.display = \'flex\';
self.fixed = expendEles[i].getElementsByClassName(\'sub-text\')[0].innerText;
for (var j = 0; j < len; j++) {
expendEles[j].getElementsByTagName(\'a\')[0].className = \'mui-navigate-right\';
}
if (i < len - 1 && (expendEles[i + 1].offsetTop / 20.0) - top <= 1.76) { // 当top大于第一个div但第二个div还没完全移上去
expendEles[i + 1].getElementsByTagName(\'a\')[0].className = \'highlight mui-navigate-right\'; // 并且下一个也要高亮
fixedBar.style.top = (expendEles[i + 1].offsetTop / 20.0 - top + 0.4) + \'rem\';
} else {
fixedBar.style.top = \'2.20rem\';
}
fixedBar.getElementsByTagName(\'p\')[0].className = self.hasClassName(expendEles[i], \'mui-active\') ? \'drop\' : \'\';
}
}
} else {
for (var k = 0; k < len; k++) {
expendEles[k].getElementsByTagName(\'a\')[0].className = \'mui-navigate-right\';
}
fixedBar.style.display = \'none\';
}
});
},
/**
* 滚动到顶部
*/
toTop(e) {
mui(\'.mui-scroll-wrapper\').scroll().scrollTo(0, 0, 100); // 100毫秒滚动到顶
},
/**
* 是否含有某个类名
*/
hasClassName(obj, className) {
return obj.className.indexOf(className) !== -1;
}
}
});
继续阅读与本文标签相同的文章
-
绑手指、蒙布也能行，OpenAI让机器人单手还原魔方
2026-05-18栏目： 教程
-
斩获三个“全国第一”，漳州有一家“隐形冠军”企业
2026-05-18栏目： 教程
-
经历8个月改造，岗顶百脑汇“转型回归”
2026-05-18栏目： 教程
-
ROKU流媒体聚合平台终将变革电视机操作系统和流媒体的观看方式
2026-05-18栏目： 教程
-
权威报告：中国专利申请连续8年居首，占世界一半
2026-05-18栏目： 教程