一个想法是使用float，然后使用shape-outside使元素占用0空间。

body {
  margin: 0;
}

.main {
  max-width: 300px;
  height: 480px;
  margin: 0 auto;
  background-color: yellow;
  position: relative;
  margin-top: 50px;
}

.body {
  height: 720px;
}

.sticky {
  position: sticky;
  z-index: 10;
  top: 0;
  background-color: blue;
  float: left; /* here */
  shape-outside: inset(50%); /* and here */
  transform: translate(-100%, 0);
}

<div class="main">
  <div class="sticky">
    sticky menu
  </div>
  <div class="body">
    body
  </div>
  <div class="other">
    other body
  </div>
</div>

代替位置粘性，使用位置固定，并为正文容器添加填充

您可以使用position: fixed;代替position: sticky;

如果主块是柔性的，那么其中的所有块都将被压到最顶部。

html body {
    margin: 0;
    padding:0 ;
    height: 100%;
    width: 100%;
    }
    .main {
    display:flex; /* main pushes up */
    width:100%;
    max-width: 300px;
    height: 480px;
    margin: 0 auto;
    background-color: yellow;
    position: relative;
    margin-top: 50px;
    }
    .body {
    height: 720px;
    }
.sticky {
    position: sticky;
    z-index:10;
    top: 0;
    height:100px; /* height container */
    background-color: blue;
    display: inline-block;
    transform: translate(-100%,0);
}