Kích hoạt sự kiện jquery khi một phần tử xuất hiện trên màn hình

Question

Tôi muốn hiển thị hiệu ứng mờ dần ngay khi phần tử xuất hiện trên màn hình. Có rất nhiều nội dung trước phần tử này vì vậy nếu tôi kích hoạt tài liệu trên tài liệu. Đã có, tại một số độ phân giải nhất định, các vistors sẽ không nhìn thấy nó.

Có thể kích hoạt sự kiện khi, sau khi cuộn xuống, phần tử có thể hiển thị không? Tôi gần như chắc chắn rằng tôi đã thấy hiệu ứng này trước đây, nhưng không có ý tưởng làm thế nào để đạt được nó.

Cảm ơn bạn!

Answer 1

jQuery Waypoints plugin có thể hữu ích. Nó cung cấp một cách để kích hoạt một hành động khi một phần tử hiển thị trên màn hình.

Ví dụ:

$('.entry').waypoint(function() { 
    alert('The element has appeared on the screen.'); 
}); 

Có một số ví dụ về the site of the plugin.

Answer 2

Tìm kiếm nhanh đã bật tiện ích mở rộng này viewport cho jQuery sẽ cho phép bạn kiểm tra khả năng hiển thị của phần tử trong chế độ xem. Nếu phần tử của bạn không ở trong chế độ xem, đừng làm hoạt ảnh mờ dần của bạn.

Answer 3

Tôi nghĩ rằng bạn đang đề cập đến các jQuery plugin "Load Lazy": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

Từ nhìn vào mã nguồn, nó trông giống như các plugin đang làm một cái gì đó như thế này:

$('#item').one('appear', function() { 
    // Do stuff here 
}); 

Answer 4

một này hoạt động tốt hơn cho tôi sau đó những người khác trong bài này: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

Cách sử dụng rất đơn giản:

$('#element').visible() 

Bạn có thể thấy plugin này được sử dụng để tạo hiệu ứng của bạn ở đây:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() { 
    $(".module").each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass("come-in"); 
     }); 
    } 
$(window).scroll(function() { 
    viewable(); 
}); 
$(window).blur(function() { 
    viewable(); 
}); 

Nếu bạn sử dụng các tab. (ví dụ: các tab giao diện người dùng jQuery), bạn phải kiểm tra xem tab có đang hoạt động hay không.

$(window).scroll(function() { 
    if($('#tab-1').hasClass('active')) { 
     viewable(); 
    } 
}); 

Answer 5

Jquery.appear plugin là cách tốt nhất để giải quyết vấn đề này.

demo.

Answer 6

Nếu bạn đang tìm kiếm để bắn một sự kiện khi một quy định, hoặc mục tiêu, yếu tố cuộn vào xem, bạn có thể làm điều này bằng cách xác định các giá trị sau:

1. chiều cao cửa sổ
2. sự giá trị khoảng cách cuộn từ phía trên cùng của cửa sổ
3. các quy định, hoặc mục tiêu, yếu tố của khoảng cách từ phía trên cùng của cửa sổ

Hãy xem xét những điều sau đây:

jQuery(window).on('scroll', function(){ 

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top), 
     windowHeight = jQuery(window).height(), 
     windowScrollValFromTop = jQuery(this).scrollTop(); 

    // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods 
    if ((windowHeight + windowScrollValFromTop) > elValFromTop) { 
     console.log('element is in view!'); 
     jQuery('.target-el').addClass('el-is-visible'); 
    } else { 
     jQuery('.target-el').removeClass('el-is-visible'); 
    } 

}); 

Code Snippet diễn:

Đoạn dưới đây giải thích một ví dụ làm việc của một vấn đề chung: sửa chữa một yếu tố để các viewport khi một quy định cuộn yếu tố vào xem.

/* Sticky element on-scroll */ 
 
jQuery(window).on('scroll', function(){ 
 

 
    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top), 
 
     elHeight = jQuery('.target-el').outerHeight(), 
 
     windowHeight = jQuery(window).height(), 
 
     windowScrollValFromTop = jQuery(this).scrollTop(), 
 
     headerHeightOffset = jQuery('.fixed-header').outerHeight(); 
 
     
 
    if ((windowHeight + windowScrollValFromTop) > elValFromTop) { 
 
     console.log('element is in view!'); 
 
     console.log(headerHeightOffset); 
 
     jQuery('.will-change-el').addClass('fixed-el').css('top',headerHeightOffset).text('fixed'); 
 
    } else { 
 
     jQuery('.will-change-el').removeClass('fixed-el').css('top','0').text('static'); 
 
    } 
 
    
 
    // using template literals for multi-line output formatting 
 
    // comment out to observe when target element comes into view 
 
    console.log(` 
 
     how far is the target element from the top of the window: ${elValFromTop} 
 
     what is the target element's height: ${elHeight} 
 
     what is the window height: ${windowHeight} 
 
     what is the window's scroll value distance from the top: ${windowScrollValFromTop} 
 
     what is the sum of the window height and its offset value from the top: ${windowHeight + windowScrollValFromTop} 
 
     `); 
 
     
 
});

/* || Reset & Defaults */ 
 
body { 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    font-family: arial; 
 
} 
 

 
/* || General */ 
 
.target-el { 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
.target-el, 
 
.will-change-el { 
 
    transition: .7s; 
 
    text-align: center; 
 
    background: #ededed; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.fixed-el { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.fixed-header { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100px; 
 
    text-align: center; 
 
    background: #ededed; 
 
    border-bottom: 1px solid #ccc; 
 
    z-index: 9; 
 
} 
 

 
.buffer-el { 
 
    height: 1000px; 
 
    padding-top: 100px; 
 
    background: whitesmoke; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fixed-header"> 
 
    <h1>Fixed Header</h1> 
 
</div> 
 
<div class="buffer-el"> 
 
    <div class="will-change-el">static</div> 
 
</div> 
 
<div class="target-el">the target element</div>

Sandbox Ví dụ:CodePen

LƯU Ý:
này sẽ chỉ áp dụng cho di chuyển các thao tác trên tài liệu và không để bất kỳ yếu tố lồng nhau chứa trong một cửa sổ xem cuộn .

Answer 7

Nếu bạn muốn có một đơn giản và làm việc sollution:

function elementInView(elem){ 
    return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ; 
}; 

$(window).scroll(function(){ 
    if (elementInView($('#your-element'))) 
    //fire at will! 
    console.log('there it is, wooooohooooo!'); 
});