绝对定位-随滚动条 固定于某处

Posted 2020-08-16

css:
　　

#anchor{   
position:absolute;

   top:40%;
   left:40%;
   width:100px;
   height:100px;
   background-color:red;
}

js:
$(function(){
   var anchorTop = $("#anchor").css("top");
   anchorTop = Number(anchorTop.substring(0, anchorTop.indexOf("p"))); //首先在监听器外部记录某id=anchor的标签的初始位置
   window.onscroll = function () {
      var top = document.documentElement.scrollTop || document.body.scrollTop;
      $("#anchor").css({
         transition:"top 1s",
         webkitTransition:"top 1s",
         oTransition:"top 1s",
         msTtransition:"top 1s",
         mozTransition:"top 1s",
         top: anchorTop + top + "px"
      });
   };
});