CSS.滚动后元素位置改变

Question

假设我有两个

。第一个是固定的标题，第二个是相对位置的广告。滚动后，广告会进入标题中。广告应该粘在标题上，并且它们都返回到正常的页面流中，就像其他内容一样可以向下滚动。我相信你已经明白我的意思。

此时我没有具体的代码，只是在脑海中构思。一种想法是使用jQuery的window.scroll()和window.scrolltop()函数来检测窗口位置并在更改CSS时使用。但如何将广告粘在标题上并返回正常流呢？

我已经搜索过谷歌并查看了这里的答案，但没有找到任何有价值的信息。如果您有任何想法或信息，我将不胜感激。

- Saulius s

---

这是您想要实现的吗？请查看右侧的窗口并滚动。http://www.kenya.com/package/big-five-kenya-safari-10-days/ - ryan0319

Answer 1

我曾在另一个网站上做过类似的事情。

基本上，我将位置从“固定”转换为“相对”，但可以根据您的使用进行调整:

    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"});
            }
        }
    );

- random_user_name

Answer 2

将绝对定位内容的位置更改到页面顶部会导致该内容跳动；这个内容会滚动然后跳回原来位置。如果您想避免跳动，当它滚动到顶部时，请使用 jQuery 将其位置从 absolute 更改为 fixed，当滚动到页面顶部时再将其改回 absolute。

- Wayne