首先看开始和结束：

开始： 结束：

———————————————————————————————————————————

.bxyc{
  /* position: absolute; */
  position: fixed ;
  display: block !important;
  opacity: 0 ;
  top: 753px;
  right: 579px;
  left: 50%;
  margin-left: 650px;
  margin-top: -300px;
  width: 55px;
  height: 310px;
  background-color: whitesmoke;
  transition: all 0.3s;
  z-index: 100;
}

  <script>
    // 版心右侧
    // 目的：让版心右侧小盒子在滑动到指定位置时显示出来并完成过渡
    // 首先获取元素
    const bxyc = document.querySelector('.bxyc')
    const goods = document.querySelector('.goods-list')
    // 设置事件
    bxyc.style.display = 'block'
    window.addEventListener('scroll', function () {
      // console.log(document.documentElement.scrollTop)
      if (document.documentElement.scrollTop > goods.offsetTop) {
        // bxyc.style.display = 'block'
        bxyc.style.opacity = '1'
        console.log(goods.offsetTop)
      }
      else{
        // bxyc.style.display = 'none'
        bxyc.style.opacity = '0'
      }

    })
  </script>

———————————————————————————————————————————

目的：将侧边栏随着滚动条滚动显示出来，并且添加过渡效果让其看起来更加顺滑

遇到的问题：过渡属性没有效果

开始的思想：随着滚动条的滚动让侧边栏的display的block——>none，从而达成盒子显示与消失的效果，然后再将opcity的number从1——>0，从而达成侧边栏的淡入淡出

解决思想：保持display的block不变，只将其opcity添加过渡，从而达成效果