基於滾動更改我的div容器的位置

我實際上是在設計我的應用程序。我有我的頁眉和頁腳之間的容器，當我滾動頁面時，當容器遇到標題我希望位置從相對固定。基於滾動更改我的div容器的位置

初始設定：

.div { 
     position: relative; 
     zoom: 1; 
     z-index: auto; 
    }

一旦在div容器是新的我想要的標題中的格的位置而改變爲固定。

.div { 
     position: fixed; 
     zoom: 1; 
     z-index: 1; 
     top: 0px; 
     padding-top: 10px; 
     left: 400px; 
    }

我該如何做到這一點？能幫助我嗎？

謝謝。

來源

2017-02-09 user7508299

「容器遇到標題時」 - 這是什麼意思？「一旦div容器是新的標題」 - 這是什麼意思？你的標記在哪裏？ –

我的標題已修復。當我向上滾動時，我的div容器也滾動起來，當它正要遇到我的標題的底部。我想把div容器的位置改爲固定的。 – user7508299

現在我明白你的問題了，我更新了我的答案，請檢查它 – imudin07

使用onscroll爲您的容器：

<div class="div" id="content" onscroll="onScroll()"> 
... 
<div id="container"></div> 
... 
</div>

你必須使用JavaScript和檢查貨櫃符合頁眉或不：

function onScroll() { 
    var content = document.getElementById('content'); 
    var container = document.getElementById('container'); 
    var scrollTop = content.scrollTop; 
    var elOffsetTop = container.offsetTop; 
    var elHeight = container.offsetHeight; 
    if ((scrollTop > elOffsetTop)&&(scrollTop<elOffsetTop+elHeight)) { 
     content.classList.add("on-top"); 
    } else { 
     content.classList.remove("on-top"); 
    } 
    }

而且在CSS：

.on-top { 
    position: fixed; 
    ... 
}

下面是一個例子： https://jsfiddle.net/en7Lf2wz/6/

來源

2017-02-09 01:58:14 imudin07

基於滾動更改我的div容器的位置

回答

相關問題