【问题标题】:If element is scrolled behind a fixed position element如果元素滚动到固定位置元素后面
【发布时间】:2014-04-08 11:27:46
【问题描述】:

如何判断一个元素是否滚动到另一个固定在顶部的元素后面?

我想要做的是当一个元素在一个固定元素下面并且之后的每个高度或滚动顶部时运行一些 javascript。

我正在尝试做一个粘性标题,但我不能只在 scrollTop 上进行固定定位,因为我的粘性定位元素会随着视口变小而被向下推,这意味着需要不同的 scrollTop 来修复然后元素。

这就是为什么我认为当元素位于已经固定在顶部的元素下方时,修复/粘贴元素会更容易。

我尝试过: position:sticky; 带有这两个 polyfill 的供应商前缀:

【问题讨论】:

    标签: javascript jquery css css-position sticky


    【解决方案1】:

    看看 Sticky Kit,它似乎具有处理您的情况所需的功能:http://leafo.net/sticky-kit/

    最重要的是,您可以引发一个事件,告诉它在您的内容更改时重新计算粘性位置。

    例如:

    $(window).on('resize', function(){
        $(document.body).trigger('sticky_kit:recalc');
    });
    

    编辑:

    我快速浏览了您的网站。

    要使其工作,您需要将 #filter#main 元素移动到 <body> 下的共享父级 - 所以不是 <body> 的直接子级:

    <body>
        <div>
            <section id="filter">
                ...
            </section>
            <main id="main">
                ...
            </main>
        </div>
    </body>
    

    然后在您的main.js 文件中删除整个$(window).scroll() 处理程序,它不需要。在大多数情况下,让sticky-kit 处理元素需要放置的位置的计算:

    // Removed $(window).scroll(...)
    $('#filter').stick_in_parent();
    
    $(window).on('resize', function(){
        $(document.body).trigger('sticky_kit:recalc');
    });
    

    最后,您需要在动画和slideToggle 效果完成后引发 'sticky_kit:recalc' 事件,以确保固定元素最终出现在正确的位置。如果你不这样做,那么你的粘性元素会尝试覆盖整个页面或做其他奇怪的事情。

    祝你好运!

    【讨论】:

    • 我认为这是正确的解决方案,但我在实施它时遇到了一些问题。此处:irfandesign.com/dev 点击“了解我的更多信息”或“工作”,然后header nav ul 将出现在滚动条上。我正在尝试修复#filter 当它碰到header nav ul 时,它是固定的,并在用户向下滚动时保持#filter 固定。但是当用户向上滚动并出现#filter上方的内容时,请取消修复它。我尝试过但不起作用的是 main.js:irfandesign.com/dev/js/main.js。我将非常感谢任何和所有帮助修复和取消修复它。
    • 非常感谢您的帮助!我搞定了!
    猜你喜欢
    • 1970-01-01
    • 2019-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-16
    • 2014-12-15
    • 1970-01-01
    • 2016-11-29
    相关资源
    最近更新 更多