【问题标题】:Script to stop fixed div from scrolling under another div?阻止固定div在另一个div下滚动的脚本?
【发布时间】:2015-08-24 14:59:06
【问题描述】:

https://rebecca-milazzo-test.squarespace.com/featured#/btr/

我将页面元数据设置为固定位置,但是当用户滚动时,div 不会停止并在页面底部的缩略图下滚动。我研究了其他脚本,但它们都是为了将​​ div 停止在某个像素高度而不是另一个元素而创建的。

非常感谢任何帮助。

【问题讨论】:

  • 你不能把侧边栏的z-index设置得更高吗?
  • 如果可能的话,我希望它停止并且不要翻转图像。

标签: javascript jquery scroll fixed sticky


【解决方案1】:

您将要创建一个检查窗口滚动位置的函数,以查看您是否已滚动到缩略图部分。当您滚动到缩略图部分时,将固定元素位置设置为绝对,并将其顶部设置为窗口滚动位置加上原始顶部值。对于像我这样认为 z-index 就足够的人来说,OP 不希望元素位于缩略图部分的下方或滚动的缩略图部分的上方。

function checkposition(){
    fixedelement = document.querySelector(".project-meta");
    stopelement = document.querySelector("#project-thumbs");
    stoppoint = stopelement.scrollTop - fixedelement.clientHeight - parseInt(fixedelement.style.top);
    if (window.scrollY >= stoppoint){
        fixedelement.style.position = "absolute";
        fixedelement.style.top = [defaulttophere] + window.scrollY + "px";
    } else {
        fixedelement.style.position = "fixed";
        fixedelement.style.top = [defaulttophere];
    }
}

window.addEventListener("scroll", checkposition);

让我知道这是否有效,我很快就把它放在一起了。

【讨论】:

  • 非常感谢您这么快提供帮助!我尝试了打开和关闭 .project-meta 的附加 css(位置:固定),但它没有工作......
猜你喜欢
  • 2017-07-29
  • 2014-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-03
  • 1970-01-01
相关资源
最近更新 更多