Question

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

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

我不知道如何解决这个问题，我看过几个插件，但是都没有提供基于内容的定位，我找不到我想要的其他任何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一样？

您可以在此处看到该网页-该网页仍处于建设阶段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

Answer 2

这是我的解决方法。

已编辑：

const docHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
const logo = document.querySelector('.scroll-text');
const logoHeight = logo.offsetHeight;
// to get the pseudoelement's '#page::before' top we use getComputedStyle method
const barTopMargin = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);

let viewportHeight, barHeight, maxScrollDist, currentScrollPos, scrollFraction;

logo.style.top = barTopMargin + 'px';

window.addEventListener('load', update);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);

setSizes();


function update() {
    currentScrollPos = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    scrollFraction = currentScrollPos / (docHeight - viewportHeight);

    logo.style.top = barTopMargin + (scrollFraction * maxScrollDist) + 'px';
}

function setSizes() {
    viewportHeight = window.innerHeight;
    // to get the pseudoelement's '#page::before' height we use getComputedStyle method
    barHeight = parseInt(getComputedStyle(document.querySelector('#page'), '::before').height); 
    maxScrollDist = barHeight - logoHeight;
    update();
}

如果我的理解正确，您希望#page::before元素的顶部，左侧，底部和右侧都具有相似的边距。如果是这样，那么我认为使用以下样式规则会更好：

#page::before {
    content: "";
    position: fixed;
    top: 30px;
    bottom: 30px;
    left: 30px;
    right: 30px;
    ...
}

使用position: fixed属性（或position: absolute）时，只需设置top-bottom和{{1 }}-同时具有left个属性。 P. S .：而且使用right也没有意义，因为display: inline-block（和position: fixed）会自动将position: absolute设置为display：）

希望这对您有所帮助！

基于滚动位置的div位置

2 个答案: