在页面上滚动“position：fixed”div但不高于某个div

Question

我在页面中间有一个div（一个位置：固定）。我想要的是当用户向下滚动页面时，div向下移动就像任何具有固定位置的div一样，但是当用户向上滚动时，div不应该高于上部div。也就是说，它保留在我创建它的位置。

知道我该怎么做吗？

我目前的解决方案如下。这个解决方案的问题在于，由于我很难对top位置进行编码，因此在不同的屏幕中，div bhevaes会有所不同，这是一个很大的问题。

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%;

}