有没有办法让容器在滚动到屏幕外时保持边框半径？

Question

滚动主要内容时，标准内容会出现在标题后面。我想知道是否可以在直接滚动到标题之前被切断一点，并在滚动时保持其边框半径。我已经用动画展示了我正在尝试做的事情：

---

尝试 1（片段即将推出）

溢出框

我尝试将内容放入可滚动的框中，其中内容溢出框，但您必须将鼠标放入框内才能使其滚动。我希望它像普通页面一样滚动，因此我添加了 JavaScript，使其可以从任何鼠标位置滚动。虽然它确实有效，但由于脚本的原因，滚动有时会变得紧张，所以我想看看是否有我不知道的不同方法。

尝试 2（有片段）

在内容之上遮盖背景图像的照片

我尝试的第二件事是在主要内容之上屏蔽用于背景的相同图像。在标题粘在视口顶部后，我根据当前滚动位置向上翻译该图像以及初始翻译以使其与背景对齐。 它工作得相当好，但在初始页面加载时它会有点闪烁，如果我滚动得太快，图像的 Y 平移会变得很奇怪。

我使用的图像与视频示例中的图像不同，只是在我弄清楚问题时作为占位符。

window.addEventListener('DOMContentLoaded', function() {
  var initialTranslateY = -247; // Change to positive value for upward translation
  document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + initialTranslateY + 'px)';
  var lastValidScrollPosition = 0; // Store the last valid scroll position
  var isInitialPosition = true; // Flag to track if scroll position is less than 200 pixels

  function updateTranslation(scrollPosition) {
    // Check if scroll position is within valid range
    if (scrollPosition >= 0 && scrollPosition <= document.documentElement.scrollHeight - window.innerHeight) {
      lastValidScrollPosition = scrollPosition; // Update the last valid scroll position

      if (scrollPosition >= 200 || isInitialPosition) {
        isInitialPosition = false; // Update the flag

        var additionalTranslateY = scrollPosition - 200;
        var totalTranslateY = initialTranslateY - additionalTranslateY; // Subtract additionalTranslateY
        document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + totalTranslateY + 'px)';
      } else {
        // If scroll position is 199 or less, set translation to -247px
        document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + initialTranslateY + 'px)';
      }
    } else if (scrollPosition < 0) {
      // If scroll position is negative, set translation to -247px
      document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + initialTranslateY + 'px)';
    } else {
      // Use the last valid scroll position
      var additionalTranslateY = lastValidScrollPosition - 200;
      var totalTranslateY = initialTranslateY - additionalTranslateY; // Subtract additionalTranslateY
      document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + totalTranslateY + 'px)';
    }
  }

  window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;

    // Request animation frame only if it's not already requested
    window.requestAnimationFrame(function() {
      updateTranslation(scrollPosition);
    });
  });
});

/* Resetting default margin and padding */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Body styles */

body {
  font-family: Arial, sans-serif;
  line-height: 2;
}

.bg-img {
  width: 100%;
}

.container {
  display: grid;
}

.container>* {
  background-color: rgba(255, 255, 255, 0.565);
}

.grid-item1 {
  grid-area: 1 / 1 / 5 / 1;
  overflow: hidden;
}

.grid-item2 {
  grid-area: 1 / 1 / 1 / 1;
  height: 200px;
}

.grid-item3 {
  grid-area: 2 / 1 / 2 / 1;
  position: sticky;
  top: 0;
  height: 80px;
  background-color: white;
}

.grid-item4 {
  overflow: hidden;
  height: 40px;
}

.grid-item5 {
  grid-area: 4 / 1 / 4 / 1;
  width: 40%;
  justify-self: center;
  /* Center the item horizontally */
}

<div class="container">
  <div class="grid-item1">
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/79527594_9gshrOpBtFw5pjV.png" class="bg-img">
  </div>
  <div class="grid-item2">
    <p>Banner</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="grid-item3">
    <h2>Header</h2>
    <div class="grid-item4">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/79527594_9gshrOpBtFw5pjV.png" class="bg-img">

    </div>
  </div>
  <div class="grid-item5">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Answer 1

将背景图像位置固定，这样可能会起作用

并用简单的话解释你想要做什么。