如何在滚动时修复主屏幕上的购物车按钮

在滚动时修复主屏幕上的购物车按钮可以通过以下步骤实现：

使用CSS固定定位：将购物车按钮的CSS属性设置为position: fixed，这样无论页面如何滚动，购物车按钮都会固定在主屏幕上。
监听滚动事件：使用JavaScript监听页面的滚动事件，当滚动事件触发时，执行相应的修复购物车按钮的操作。
动态调整按钮位置：在滚动事件的处理函数中，根据页面滚动的位置动态调整购物车按钮的位置。可以通过修改按钮的top和left属性来实现位置的调整。
考虑兼容性：在实现过程中，需要考虑不同浏览器的兼容性。可以使用现代浏览器支持的CSS属性和JavaScript方法，或者使用第三方库来处理兼容性问题。

以下是一个示例代码，演示如何在滚动时修复主屏幕上的购物车按钮：

<!DOCTYPE html>
<html>
<head>
  <style>
    .cart-button {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 100px;
      height: 40px;
      background-color: #ff0000;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>
<body>
  <div class="cart-button">购物车</div>

  <script>
    window.addEventListener('scroll', function() {
      var cartButton = document.querySelector('.cart-button');
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      if (scrollTop > 100) {
        cartButton.style.top = (scrollTop + 10) + 'px';
      } else {
        cartButton.style.top = '10px';
      }
    });
  </script>
</body>
</html>

在这个示例中，购物车按钮使用CSS的position: fixed属性进行固定定位，监听window对象的scroll事件，在滚动事件的处理函数中根据页面滚动的位置动态调整按钮的top属性。当页面滚动超过100像素时，购物车按钮会跟随页面滚动，否则保持在初始位置。

请注意，这只是一个简单的示例，实际情况中可能需要根据具体需求进行更复杂的处理。