Question

我一直在使用position: fixed;来固定屏幕上的元素，但是一旦我取消它们，它们就会从屏幕上消失（滚动到几行之后）并出现在文档的开头。< / p>

例如：
如果元素在第5行未固定，它应该保留在文档的第5行，但无论从何处取消固定，它都会跳回到顶部。

我一直在钉扎和取消固定，

.pinned {
  position: fixed;
}

.unpinned {
  position: relative;
}

链接到CodePen。

那么，有没有什么方法可以将元素的位置（取消固定）设置到 位置，从中取消固定 仅使用CSS（或最小化） JS如果不能使用纯CSS）？

P.S。我在尝试取消固定时尝试使用absolute，relative和static，但似乎都没有效果。

Answer 1

没有。你不能单独用CSS做这件事。您需要使用JavaScript来达到预期的效果。

将JavaScript更改为以下内容：

var el = document.getElementById('element');
function toggle(){
    if(el.className == 'pinned'){
        el.style.top = (document.body.scrollTop+el.getBoundingClientRect().top)+'px';
        el.className = 'unpinned';
    }else{
        el.style.top = el.getBoundingClientRect().top+'px';
        el.className = 'pinned';
    }
}

这个CSS：

.unpinned{
    position: absolute;
}

此代码将更改元素的top属性，然后在固定位置和绝对位置之间切换。

Answer 2

您可以将元素粘贴到它的位置：

make_call

+取消固定时的一些代码和

pjsua.c

演示：http://codepen.io/anon/pen/GoEGPZ
避免它粘在卷轴上方：http://codepen.io/anon/pen/bERKzW

仅在CSS中无法执行此操作

Answer 3

您可以使用JavaScript方法检索元素相对于视口的位置。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Pin和Unpin元素仅使用CSS

3 个答案: