自动动态调整div页边距顶部

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 20px; /* 设置div与页面顶部的初始间距 */
  background-color: #f1f1f1;
}

window.addEventListener('scroll', function() {
  var div = document.querySelector('div');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var initialPaddingTop = 20; // 初始间距
  var maxPaddingTop = 100; // 最大间距

  // 根据滚动位置计算新的间距
  var newPaddingTop = initialPaddingTop + scrollTop;

  // 限制间距的最大值
  if (newPaddingTop > maxPaddingTop) {
    newPaddingTop = maxPaddingTop;
  }

  // 设置新的间距
  div.style.paddingTop = newPaddingTop + 'px';
});