javascript - 基于滚动位置的 div 位置

Question

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

默认滚动条以完全相同的方式指示您在网站上的位置，我希望我的 Logo 也这样做。当您位于网站页面顶部时， Logo 位于顶部；当您位于底部时， Logo 位于页面底部左侧的垂直栏中。

我不知道如何解决这个问题，我查看了一些插件，但没有一个提供基于内容的定位，而且我找不到我正在寻找的任何其他 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>

任何帮助将不胜感激

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

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

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

您可以在此处查看网页 - 仍在 build 中 https://www.sheree-new.shereewalker.com/

Answer 1

你可以试试这样的东西。

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; 添加到 .scroll-text CSS。

这是一个工作示例:https://jsbin.com/yuholihece/edit?html,css,js,console,output