在頁面上滾動“位置：固定” 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%;

}