-3

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sumit Kumar
  • 41
  • 5
  • 2
    Hey Sumit, your question is very unclear, can you please rewrite it a bit and provides some samples of what you've already tried to do so far? – Shai Mishali Dec 11 '11 at 10:12
  • This could help with detection of whether the item is on screen - http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling - In particular, [this answer](http://stackoverflow.com/a/3535028/232593) – Merlyn Morgan-Graham Dec 11 '11 at 10:32
  • I think he wants a header to appear either 1. when the user is below the "fold" - that is, the fold is "off" the top of the viewing area - or 2. when the view isn't scrolled all the way to the top. Is that correct, Sumit? – Garvin Dec 11 '11 at 10:27

1 Answers1

0

Are you looking for something like this?

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.

Merlyn Morgan-Graham
  • 58,163
  • 16
  • 128
  • 183