Dapatkan ketinggian div yang terlihat dengan jQuery

Saya perlu mengambil ketinggian div yang terlihat dalam area yang dapat digulir. Saya menganggap diri saya cukup baik dengan jQuery, tetapi ini benar-benar membuat saya marah.

Katakanlah saya punya div merah di dalam bungkus hitam:

Dalam grafik di atas, fungsi jQuery akan mengembalikan 248, bagian div yang terlihat.

Setelah pengguna menggulir melewati bagian atas div, seperti pada grafik di atas, ini akan melaporkan 296.

Sekarang, setelah pengguna menggulir melewati div, itu akan melaporkan lagi 248.

Jelas nomor saya tidak akan sekonsisten dan sejelas di demo ini, atau saya hanya kode keras untuk nomor-nomor itu.

Saya punya sedikit teori:

• Dapatkan ketinggian jendela
• Dapatkan ketinggian div
• Dapatkan offset awal div dari bagian atas jendela
• Dapatkan offset saat pengguna menggulir.
  • Jika offsetnya positif, itu berarti bagian atas div masih terlihat.
  • jika negatif, bagian atas div telah terhalang oleh jendela. Pada titik ini, div bisa saja memenuhi seluruh tinggi jendela, atau bagian bawah div bisa ditampilkan
  • Jika bagian bawah div muncul, cari tahu jarak antara div dan bagian bawah jendela.

Tampaknya cukup sederhana, tetapi saya tidak bisa membungkus kepalaku di sekitarnya. Saya akan mengambil celah lagi besok pagi; Saya baru saja membayangkan beberapa dari Anda yang jenius mungkin bisa membantu.

Terima kasih!

PEMBARUAN: Saya menemukan ini sendiri, tetapi sepertinya salah satu jawaban di bawah ini lebih elegan, jadi saya akan menggunakan itu sebagai gantinya. Bagi yang penasaran, inilah yang saya temukan:

$(document).ready(function() {
    var windowHeight = $(window).height();
    var overviewHeight = $("#overview").height();
    var overviewStaticTop = $("#overview").offset().top;
    var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
    var overviewStaticBottom = overviewStaticTop + $("#overview").height();
    var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
    var visibleArea;
    if ((overviewHeight + overviewScrollTop) < windowHeight) {
        // alert("bottom is showing!");
        visibleArea = windowHeight - overviewScrollBottom;
        // alert(visibleArea);
    } else {
        if (overviewScrollTop < 0) {
            // alert("is full height");
            visibleArea = windowHeight;
            // alert(visibleArea);
        } else {
            // alert("top is showing");
            visibleArea = windowHeight - overviewScrollTop;
            // alert(visibleArea);
        }
    }
});

Inilah konsep cepat dan kotor. Ini pada dasarnya membandingkan offset().topelemen ke bagian atas jendela, dan offset().top + height()ke bagian bawah jendela:

function getVisible() {    
    var $el = $('#foo'),
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    $('#notification').text(visibleBottom - visibleTop);
}

$(window).on('scroll resize', getVisible);

Contoh biola

edit - pembaruan kecil untuk juga menjalankan logika saat jendela diubah ukurannya.

Hitung jumlah piksel elemen (tinggi) di viewport

Demo biola

Fungsi kecil ini akan mengembalikan jumlah pxelemen yang terlihat di (vertikal) Viewport :

function inViewport($el) {
    var elH = $el.outerHeight(),
        H   = $(window).height(),
        r   = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}

Gunakan seperti:

$(window).on("scroll resize", function(){
  console.log( inViewport($('#elementID')) ); // n px in viewport
});

itu dia.

.inViewport()Plugin jQuery

jsFiddle demo

dari atas Anda dapat mengekstrak logika dan membuat plugin seperti ini:

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

Gunakan seperti:

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px > 0) {
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

pemilih Anda akan secara dinamis mendengarkan window scrolldan resizejuga mengembalikan nilai awal pada siap DOM melalui argumen fungsi callback pertama px.

Berikut adalah versi pendekatan Rory di atas, kecuali ditulis untuk berfungsi sebagai plugin jQuery. Ini mungkin memiliki penerapan yang lebih umum dalam format itu. Jawaban bagus, Rory - terima kasih!

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
    scrollTop = $(window).scrollTop();
    scrollBot = scrollTop + $(window).height();
    elTop = this.offset().top;
    elBottom = elTop + this.outerHeight();
    visibleTop = elTop < scrollTop ? scrollTop : elTop;
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop
}

Bisa disebut dengan yang berikut:

$("#myDiv").visibleHeight();

jsFiddle