shopify html滚动announcement

Shopify HTML滚动公告（Scroll Announcement）通常是指在Shopify商店页面上使用的动态通知或弹幕式消息，用于传达促销信息、重要更新或是吸引用户注意的内容。这种元素通常是HTML5结合CSS样式和JavaScript实现的，当用户滚动页面时，会自动从屏幕底部向上滑动显示出来。商家可以自定义内容、颜色、动画效果以及展示时机等，以便增加网站的互动性和用户体验。

例如，HTML代码可能如下所示：

<div id="scroll-announcement" class="scroll-announcement">
  <p style="color: white; background-color: #ff0000; padding: 10px;">限时优惠！所有商品打8折</p>
</div>

<style>
.scroll-announcement {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.scroll-announcement.show {
  opacity: 1;
}
</style>

<script>
window.addEventListener("scroll", function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    document.getElementById('scroll-announcement').classList.add('show');
  } else {
    document.getElementById('scroll-announcement').classList.remove('show');
  }
});
</script>