基于滚动位置的 div 位置

我希望我的徽标根据网站上的滚动位置垂直上下滚动。

就像默认滚动条指示您在网站上的位置一样，我希望我的徽标也能这样做。当您位于网站页面的顶部时，徽标位于顶部，而当您位于底部时，徽标将位于页面底部的垂直栏中，位于网页左侧。

我不知道如何解决这个问题，我看过一些插件，但没有一个提供基于内容的定位，而且我找不到我正在寻找的任何其他 Stack Overflow 结果，尽管我可能没有措辞问题正确。

我的设置是

.logo-scroll {
    position: fixed;
    border: 2px solid white;
    top: 30px;
    left: 30px;
    height: calc(100vh - 60px);
    width: 75px;
}  

.scroll-text {
    height: auto;
} 

.logo-scroll .scroll-text img {
    padding: 0 6px 0 17px;
}

和我的html

<div class="logo-scroll">

    <div class="scroll-text">
        <a href="/home">
            <img src="logo.svg"/>
        </a>
    </div>

</div>

任何帮助将不胜感激

** 编辑 - 让事情变得复杂的是，我有一个 30 像素的边框，该边框不包含在页面高度中。所以顶部和底部偏移 30px。

在我隐藏它之前，边距/边框的大小需要在断点处响应地改变 - 1 也许 2。本质上，滚动条的高度始终需要与减去边距的页面高度或 :before 元素的高度相匹配。

或者，如果我可以设置偏移量，我可以重用 JS 并根据屏幕尺寸进行调整。喜欢 JS 的媒体查询吗？

您可以在这里看到该网页 - 该网页仍在建设中https://www.sheree-new.shereewalker.com/ https://www.sheree-new.shereewalker.com/

你可以尝试一下这样的事情。

window.addEventListener('scroll', e => {
  const logo = document.querySelector('.scroll-text');
  const logoHeight = logo.clientHeight;
  const viewHeight = window.innerHeight;
  const maxLogoOffset = viewHeight - logoHeight;
  const scrollFraction = getElementScrollFraction(document.querySelector('body'));
  logo.style.top = maxLogoOffset*scrollFraction;
});

function getElementScrollFraction(elem){
  return elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
}

您还需要添加position:fixed; to the .scroll-text css.

这是一个工作示例：https://jsbin.com/yuholihece/edit?html,css,js,控制台,输出 https://jsbin.com/yuholihece/edit?html,css,js,console,output