页面局部上浮动画配合滚轮实现

 float.css

.show-float {
  opacity: 0.5;
  position:relative;
  margin-top: 80px;
}

.show-animate {
  animation: showanimate 2s forwards;
}

@keyframes showanimate {
  100% {
    opacity: 1;
    /* margin-top: 0px; */
  }
  from {bottom:0px;}
  to {bottom:50px;}
}

.hide-animate {
  /* margin-top: 0px; */
  opacity: 1;
  margin-top: 80px;
  /* animation: hideanimate 2s forwards; */
}

@keyframes hideanimate {
  100% {
    opacity: 0.5;
    margin-top: 50px;
  }
}

float.js 

(function (global) {
  "use strict";
  let w_height = window.innerHeight;
  $(document).on("mousewheel DOMMouseScroll", onMouseScroll);
  function onMouseScroll(e) {
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel));
    let t = document.documentElement.scrollTop;
    let dis_height_t = w_height + t;

    if (delta < 0) {
      //向下滚动
      $(".show-float").each(function (index, element) {
        let t_h = $(element).offset().top;
        if (t_h < dis_height_t + w_height / 4) {
          // debugger;
          $(element).removeClass("hide-animate");
          $(element).addClass("show-animate");
        }
      });
    } else {
      //向上滚动
      $(".show-float").each(function (index, element) {
        let t_h = $(element).offset().top;
        if (t_h > dis_height_t - w_height / 2) {
          $(element).removeClass("show-animate");
          $(element).addClass("hide-animate");
        }
      });
    }
  }
})(this);

引入资源后，添加'show-float' class

<div class="product-section product-features show-float" id="huodong"></div>