Kiểm tra xem div có thể xem được trong cửa sổ không?

Question

Tôi có một trang web có điều hướng cố định và sử dụng tập lệnh cuộn, rất giống với điều này: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

Điều tôi đang tìm là cách để xem phần nào có thể xem được trong cửa sổ để đặt trạng thái hoạt động trên nav khi sử dụng thanh cuộn của trình duyệt, bất kỳ ý tưởng nào?

Answer 1

thấy plugin lazyload sau:

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt 

phần mà bắt đầu với lời nhận xét "trở lại tình trạng của mặt hàng liên quan đến giao diện hiện tại" sẽ kiểm tra xem một yếu tố có thể nhìn thấy trong khung nhìn.

Answer 2

Nếu bạn đang sử dụng jQuery chỉ cố gắng để kiểm tra vị trí tài liệu

$('html').position().top; 

ví dụ:

$(document).bind("scroll", checkLink); 

function checkLink(){ 

    /* Position will checked out after 1 sec when user finish scrolling */ 
    var s = setTimeout(function(){ 

    var docHeight = $('html').position().top; 
    var allLinks = $('.navigation a'); 

    if (docHeight < 0 && docHeight <= -1000) { 

     allLinks.removeClass('active'); 
     $('a.firstlink').addClass('active'); 

    } else 
    if (docHeight < -1000 && docHeight <= -2000) { 

     allLinks.removeClass('active'); 
     $('a.secondlink').addClass('active'); 

    } else { /* .... */ } 

    $(document).bind("scroll", checkLink); 
    }, 1000); 

    $(document).unbind('scroll'); 
} 

nhưng chàng trai trong ví dụ của bạn đã không được tổ chức về vấn đề này trong một thời gian dài :) họ chỉ chuyển đổi các lớp học khi nhấp vào

$('#navigation').localScroll(); 
    $('#navigation li a').click(function() { 
     $('#navigation li a').removeClass("active"); 
     $(this).addClass("active"); 
    }); 

Answer 3

Sử dụng $('#element').offset().top; để phát hiện phần tử trên cùng của phần tử.

$(window).scrollTop(); để phát hiện vị trí cuộn hiện tại.

Và $(window).height(); để phát hiện chiều cao cửa sổ hiện tại.

Và sau các bước đó, bạn thực sự chỉ cần tính toán toán học dễ dàng.

Answer 4

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

nguồn: Check if element is visible after scrolling

Answer 5

Dưới đây là tất cả các biến bạn sẽ cần ...

var $myElt  = $('.myElement');  // whatever element you want to check 
var $window  = $(window);   // the window jQuery element 
var myTop  = $myElt.offset().top; // the top (y) location of your element 
var windowTop = $window.scrollTop();   // the top of the window 
var windowBottom = windowTop + $window.height(); // the bottom of the window 

Sau đó, để đảm bảo yếu tố của bạn nằm trong phạm vi của cửa sổ ...

if (myTop > windowTop && myTop < windowBottom) { 
    // element is in the window 
} else { 
    // element is NOT in the window 
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300); 
} 

Tham chiếu jQuery:

• http://api.jquery.com/offset/
• http://api.jquery.com/height/
• http://api.jquery.com/scrollTop/