不是单纯打包就好了,路径也得对。
相应的效果图在 Playground | MDN 如图所示:
参考html文件如下:
<div id="showhidebuttons">
<button id="hideallquots" class="smallbutton">Show All</button>
<button id="showallquots" class="smallbutton">Hide All</button>
</div>
参考css文件如下:
#showhidebuttons {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9999; /* 确保按钮位于其他内容上方 */
}
参考js文件如下:
// 获取按钮元素
var showhideButtons = document.getElementById("showhidebuttons");
// 监听窗口滚动事件
window.addEventListener("scroll", function() {
// 获取滚动距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 更新按钮位置
if (scrollTop > 0) {
showhideButtons.style.top = scrollTop + "px";
} else {
showhideButtons.style.top = "0";
}
});