jQuery / CSS - 向下滚动时的全宽背景图像，只将图像的一半固定在顶部

Question

我想要实现的是当我用全宽图像和450px的高度向下滚动屏幕时，是将一半背景图像固定在屏幕顶部，然后图片将返回当我在某个点向上滚动时，它处于初始状态。我也使用sticky.js插件来帮助我。

这是我用jQuery尝试过的代码：

$('.category-banner').sticky({ topSpacing: 0 });
$(window).scroll(function(){
  var sticky = $('.category-banner'),
      scroll = $(window).scrollTop();

  if (scroll >= 300) $('.category-banner').css('position', 'fixed')
  else if (scroll <=  300)$('.category-banner').css('position', 'relative')
});

这是CSS：

.category-banner {
  position: relative;
  margin-top: 50px;
  background-image: url('/assets/img/categorybanner.jpg');
  background-size: cover;
  height: 450px;
  background-attachment: fixed;
}

现在结果是，当我向下滚动一个给定的点时，背景图像的整个宽度和高度是固定的，我想要的只是图像的一半在我向下滚动时粘在顶部特定点，当我回到页面顶部时，返回其初始的全宽和高度。

请注意，我正在尝试使用css背景图像来实现此目的。谢谢！