要实现保留英雄图像背景的一部分作为粘性导航，可以使用CSS和JavaScript来实现。下面是一个基本的解决方法示例：

HTML代码：

CSS代码：

.hero-image {
  position: relative;
  background-image: url('path/to/hero-image.jpg');
  background-size: cover;
  height: 500px; /* 调整高度以适应英雄图像的大小 */
}

.sticky-navigation {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8); /* 设置导航背景颜色和透明度 */
  padding: 10px;
  z-index: 1; /* 确保导航位于英雄图像上方 */
}

JavaScript代码：

window.addEventListener('scroll', function() {
  var heroImageHeight = document.querySelector('.hero-image').offsetHeight;
  var stickyNav = document.querySelector('.sticky-navigation');
  
  if (window.pageYOffset >= heroImageHeight) {
    stickyNav.classList.add('sticky'); // 添加一个带有固定定位样式的类
  } else {
    stickyNav.classList.remove('sticky'); // 移除固定定位样式的类
  }
});

上述代码使用了position: sticky将导航固定在屏幕顶部，当用户滚动到英雄图像下方时，导航将固定在屏幕顶部。通过添加或移除一个带有固定定位样式的类来实现导航的固定和非固定状态。

注意：代码示例中的path/to/hero-image.jpg应该替换为实际的英雄图像路径。此外，你可能需要根据实际情况调整样式和事件处理程序来满足你的需求。