Question

I have a web page with a height more than 1000 pixels. There is an important text which I need to display all the time to a visitor. I placed a 20 pixel high DIV with a fixed property at the top of the page but the content of that DIV appears in the browser available in the middle. I want to hide the top div, but as I scrolled up from the middle div I want to show the top div.

Answer 1

Are you looking for something like this?

• http://jsfiddle.net/3vEaF/

Given this HTML:

<p>a bunch of text, and duplicate this several times.  I used lorem ipsum</p>
<p><span id="interesting">Here is the interesting text.</span></p>
<p>a bunch more text, and duplicate this several times.  I used lorem ipsum</p>

You can use this JavaScript to display a div when span#interesting is visible, and hide it when it isn’t visible:

// Add a div to contain a copy of the interesting text
var interestingOffscreen = $('<div/>')
    .attr('id', 'interesting')
    .text($("span#interesting").text());

$('body').prepend(interestingOffscreen);

// Center the display of that copy
interestingOffscreen.css(
    'margin-left',
    -(interestingOffscreen.outerWidth() / 2)
);

// Detect when it is offscreen/onscreen and react    
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var isNotVisibleHandler; // forward declaration

function isVisibleHandler()
{
    if(isScrolledIntoView($("span#interesting")))
    {
        $(window).unbind('scroll');
        interestingOffscreen.fadeOut(
            function() {
                $(window).scroll(isNotVisibleHandler);
                $(window).scroll(); // force detection
            }
        );
    }
}

isNotVisibleHandler = function()
{
    if(!isScrolledIntoView($("span#interesting")))
    {
        $(window).unbind('scroll');
        interestingOffscreen.fadeIn(
            function() {
                $(window).scroll(isVisibleHandler);
                $(window).scroll(); // force detection
            }
        );
    }
};

$(window).scroll(isVisibleHandler);

Not all of this is strictly necessary, but it looks cool.