Question

我有一个从页面中间开始的标题。

我希望它向上移动并越过页面顶部向下滚动（带有缓出）然后返回并保持在页面顶部向上滚动直到用户返回到主页面，此时头部回到中间位置。

到目前为止，我只是轻松地将其放在首位并留在那里：

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky-180) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

的CSS：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 0.4s ease;
}

我没有制作轻松的动画，所以我不完全确定它是如何工作的。但我只是在应用了滚动动画的column类中使用它，所以它似乎有效：

$(document).ready(function() {
  let speeds = {
    'slow': 0.5,
    'mid': 0.7,
    'fast': 1,
    'ss':1.75,
  };
  let noColumns = $('.column').length;
  let columns = new Array();
  for (let i = 0; i < noColumns; i++) {
    columns.push({
      columnHeight: parseInt($('.column').eq(i).css('height')),
      position: 0,
      speed: speeds[$('.column').eq(i).attr('data-speed')]
    });
  }
  let previousScroll = $(this).scrollTop();
  var conHeight = parseInt($('.column').eq(0).css('height')) * 3;
  //all activate. the times x makes it keep going after we run out of original view
  $('.tall').css('height', conHeight + 'px');
  $(window).on('scroll', function(event) {

    var shift = $(this).scrollTop() - previousScroll;
    previousScroll = $(this).scrollTop();
    for (var i = 0; i < noColumns; i++) {
      columns[i].position -= shift * columns[i].speed;
      $('.column').eq(i).css('top', columns[i].position + 'px');
    }
  });
});

我找到了一些教程，介绍如何制作一个顶部消失的标题，然后在向上滚动时返回，就像这个https://codepen.io/kaemak/pen/mHyKa/一样，但我不确定如何将其组合我已经拥有了。

如何制作半粘头？

0 个答案: