바닥

Question

인사들에 상자를 구독 끈적 작업 임

https://generalassemb.ly/

사이트 아래에 내가 JS 다음 예전처럼 상자를 구독

$.fn.is_on_screen = function(){ 
    var win = $(window); 
    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
}; 
$(window).scroll(function(){ // bind window scroll event 
    if($('#foot').length > 0) { // if target element exists in DOM 
     if($('#foot').is_on_screen()) { // if target element is visible on screen after DOM loaded 
      $('.subscribeBox').fadeOut(1000); 
     } else { 
      $('.subscribeBox').fadeIn(1000); 
     } 
    }  
}); 

하지만 문제는 내가 추가 할 필요가있다 스크롤 양이> 200 일 때 구독 상자가 보이게되는 또 하나의 기능입니다. 다른 바이스 숨겨진 plz에서 나에게 어떻게 할 지 제안 해줍니다. 시도를 많이 한 후

Answer 1

나는 그것의 솔루션 ... 단지 바보 같은 실수에서 찾을 수 있습니다 ...

HTML 여기

<header id="head"> 
    <p>Fixed Naviagtion</p> 
</header> 
<div class="content"> 
    <p>Some Content</p> 
</div> 
<footer id="footer"> 
    <p>Footer Contents</p> 
</footer> 
<div class="subscribeBox"> 
    <p>Subscribe me</p> 
</div> 

이다가 .. JS 순수 코드

$.fn.is_on_screen = function(){ 
    var win = $(window); 
    var viewport = {top : win.scrollTop(),left : win.scrollLeft()}; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 
    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
}; 
$(window).scroll(function() { 
    if ($(window).scrollTop() > $('#head').height()) { 
     if($('#foot').length > 0) { 
      if($('#foot').is_on_screen()) { 
       $('.subscribeBox').fadeOut('slow'); 
      }else {$('.subscribeBox').fadeIn('slow');}  
     }} 
    else{$('.subscribeBox').fadeOut('slow');}   
});