javascript - 在页面上滚动 "position: fixed"div 但不超过某个 div

Question

我在页面中间有一个 div(位置:固定)。我想要的是，当用户向下滚动页面时，div 会向下移动，就像任何具有固定位置的 div 一样，但是当用户向上滚动时，div 不应超过上部 div。也就是说，它保留在我创建它的位置。

知道我该怎么做吗？

我目前的解决方案如下。此解决方案的问题在于，由于我对 top 位置进行了硬编码，因此 div 在不同屏幕上的表现不同，这是一个大问题。

CSS

.div-fixed-position {
    background-color: #fff;
    padding: 20px;
     position: fixed; 
        right: 0;
        top: 625px; /* the problem! */
        z-index: 1000;

    width: 100%;

}

非常感谢

Answer 1

我使用这个 JS 来自动检测我的 top CSS 属性:-

JS

var navHeight    = $('header.myheader').height();
var totalHeight = parseInt(headerHeight) + parseInt(navHeight) + 50;
$(".div-fixed-position").css({ top: totalHeight });

然后我从我的 CSS 中删除了顶部。

CSS

.div-fixed-position {
    background-color: #fff;
    padding: 20px;
     position: fixed; 
        right: 0;

        z-index: 1000;

    width: 100%;

}