Find visible height of div element while scrolling

Question

Please consult this fiddle http://jsfiddle.net/abhicodes/LasxP/

Here I want to find out visible height of #content-wrapper while each scroll. #header will always have same height and it will be fixed, but footer height is different in some of my pages, so I cannot take current footer height as a standard.

If I reach end of the page then most of the area is covered by footer, then also I want just the visible portion of #content-wrapper and same to happen in rest of the scroll. For the rest of the page where footer is not visible I can subtract header height to get visible part.

Suppose if a we are at the bottom of the page and viewport height is 600px then I would like to find out how much area of #content-wrapper is visible to a user. Because at that time footer is also there which accomodates 100px and header accomodates 80px, so total visible height of #content-wrapper will be 600-180 = 420px and similarly if we are at top then footer is not there and just header is there, so visible area of #content-wrapper will be 520px.

So, moral of the story is, I want to find out at any given instance during scroll how much height of #content-wrapper is visible to a user if you take this fiddle in consideration

I think you need to do more work to specify what you would like to happen, in clear terms. At the moment, I cannot tell what you are attempting to achieve. — michaelward82, Aug 02 '13 at 10:18
Possible duplicate: http://stackoverflow.com/questions/14126110/get-visible-height-of-an-element-instead-of-its-actual-height-with-jquery — Sumurai8, Aug 02 '13 at 10:51
@Abhi Is this what you are looking as output for visible area of #content-wrapper, please visit [link](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — Sunil Kumar, Aug 02 '13 at 11:15
@Sumurai8: I have already been through that question,but it is not serving my problem.Answers there does not provide height of div visible in viewport — Abhinav, Aug 02 '13 at 11:17

Clxy · Accepted Answer · 2013-08-02T11:30:40.337

4

Try

var $win = $(window);
var $footer = $("#footer");
$(window).scroll(function(){
    var windowHeight = $win.height();
    var footerTop = $footer.offset().top - $win.scrollTop();
    var visibleHeight = Math.min(windowHeight, footerTop) - 80;
    console.log(windowHeight +", " + footerTop + ", " + visibleHeight);
});

Here is the updated jsfiddle.

The logic is simple.

Using window's height before footer showing.
Using footer's top after footer became visible.
[1] or [2] - header's height = your answer.

edited Aug 02 '13 at 11:30

answered Aug 02 '13 at 11:14

Clxy

505
1
5
13

1

Links to used functions/methods: [scrollTop](http://api.jquery.com/scrollTop/), [offset](http://api.jquery.com/offset/) and [height](http://api.jquery.com/height/). – Sumurai8 Aug 02 '13 at 11:22
Thanks, I was stuck on this from morning. Correct answer from all similar questions that I found on stackoverflow – Abhinav Aug 02 '13 at 11:28

score 2 · Answer 2 · answered Aug 02 '13 at 11:36

The following will give you the visible height, and separates out the variables so the calculation makes sense:

$(document).on('scroll', function() {
    //Container
    var cont = $("#content-container");

    //Scroll Position (varies with scroll)
    var pageTop = $(document).scrollTop();
    //Visible Page Size (fixed)
    var pageSize = $(window).height();

    //Header Height (fixed)
    var headerHeight = $('#header').height();

    //Content top (fixed)
    var contTop = cont.offset().top;
    //Content top position (varies with scroll)
    var contTopPos = contTop - pageTop;
    //Content bottom (fixed)
    var contBottom =  cont.height() + contTop;
    //Content position in relation to screen top (varies with scroll)
    var contBottomPos = contBottom - pageTop;

    /*
        VISIBLE AREA
        Take the size of screen/page, unless the bottom of the content further up
            and subtract from it
        The header height, unless the top of the content is below the header
    */
    var visibleArea = Math.min(pageSize, contBottomPos) - Math.max( headerHeight, contTopPos);
});

Example: http://jsfiddle.net/asifrc/LasxP/8/

Find visible height of div element while scrolling

2 Answers2