Javascript CSS。滚动后元件位置的变化

假设我有两个

div

s。第一个是固定标题，第二个是相对位置广告。滚动后，广告进入标题。广告应该贴在标题上，它们都返回到正常的页面流，我可以像其他内容一样向下滚动。我相信你已经知道我的想法了

目前我没有具体的代码，只是头脑风暴。一个想法是使用jQuery

window.scroll（）

和

window.scrolltop（）

函数来检测窗口位置和更改CSS的时间。但如何坚持广告并恢复正常流量

---

我在这里搜索了答案，但找不到任何有价值的信息。如果您有任何想法或信息，我将不胜感激。

刚刚在另一个网站上做了类似的事情

基本上，我从“固定”位置过渡到“相对”位置，但可以根据您的使用进行调整：

    var header = $('#header');
    var ad = $('#ad');
    var min_scroll = 25; // Set your minimum scroll amount here
    $(window).scroll(
        function() {
            var t = $(window).scrollTop();
            if (t > min_scroll) {
                // define your scroll CSS here
                header.css({position: "relative"});
                ad.css({position: "relative"});
            } else {
                // define your non-scrolled CSS here
                header.css({position: "fixed"});
                ad.css({position: "absolute"});
            }
        }
    );

---

将绝对位置内容的位置更改到页面顶部将导致该材料跳跃；该材质将滚动并跳回原位。如果您想避免跳跃，那么当它滚动到顶部时，使用jquery将位置从绝对位置更改为固定位置，并在滚动到页面顶部时将其更改回绝对位置。

这就是您想要实现的目标吗？看看右边的码头和斯克罗尔。