Question

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

此刻我没有具体的代码，只是头脑风暴。一个想法是使用jQuery window.scroll()和window.scrolltop()函数来检测窗口位置以及何时更改CSS。但是如何坚持这个广告并恢复正常流程???

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

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

Answer 2

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

CSS。滚动后元素位置发生变化

2 个答案: