CSS. Element position change after scroll

css, html, javascript, jquery

Solution

Just did a very similar thing on another site.

Basically, I transition from "fixed" position to "relative" position, but could be adapted to your use:

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

Problem

Let's say I have two `div`s. The first one is fixed header and the second is relative position ad. After scroll, the ad gets inside header. The ad should stick to the header and they both return to a normal page flow, that I could scroll down that like other content. I believe you've got my idea. At this moment I have no specific code, just brainstorming. One idea is to use jQuery `window.scroll()` and `window.scrolltop()` functions to detect window position and when change CSS. But how to stick that ad and return to normal flow??? I've googled, browsed answers here but couldn't find any valuable info. If you have any ideas or info I'd be grateful.

Original source