divをスクロールして、divとidを隠す（スムーススクロールしない）

Question

divが1400を超えている場合、1400（< 1400）未満のページスクロール時にdivを表示するスクリプトを作成してください。しかし、私はそのdivが高さ（1400）ではなくdiv IDと "stop" divで隠すことを示す必要があります。助けてくれますか。

<style> 
#goSale {position:fixed;bottom:-300px;width:auto;height:auto;} 
#goSale img {opacity:100;-moz-animation:blink normal 3s infinite ease-in-out;-webkit-animation:blink normal 3s infinite ease-in-out; 
-ms-animation:blink normal 3s infinite ease-in-out;animation:blink normal 3s infinite ease-in-out;animation-iteration-count:5;-ms-animation-iteration-count:5; 
-webkit-animation-iteration-count:5;-o-animation-iteration-count:5;border:0px;width:100px;height:auto;} 
</style> 

<script> 
$(document).ready(function() { 
$(window).scroll(function() { 
    if($(this).scrollTop() < 1400){ 
     $('#goSale').stop().animate({ 
      top: '65px' 
      }, 1); 
    }else{ 
     $('#goSale').stop().animate({ 
      top: '-100px' 
     }, 1); } }); 

$('#goSale').scroll(function() { 
    $('html, body').stop().animate({ 
     scrollTop: 0 
    }, 1, function() { 
     $('#goSale').stop().animate({ 
      top: '65px' 
     }, 1); }); }); }); 
</script> 

<div id="goSale"><img src="img/pages/sale.png"></div> 

例：http://www.vichy.ho.ua - 動画やその他のような要素を、「スクロール」、右上の黒立方体や他の左側と右側...

Answer 1

別の特定のdivの中にあるとき、あなたはそれを隠すことにしたいですビュー。さて、あなたはそのdivの位置を知り、その数値を使ってスクロールした比較を適応させる必要があります。

ですから、3回の測定取る必要があります：あなたの "停止DIV" の先頭位置

あなたの "停止DIV" の下の位置を

1. ユーザーの画面の高さ
2. を

それから、単純な数学...そしてスクロールした位置と比較してください。

$(document).ready(function(){ 
 
    // Get some measurements 
 
    var stopPosition = $("#stop").offset().top; 
 
    var stopHeight = $("#stop").outerHeight(); 
 
    var displayHeight = $(window).height(); 
 

 

 
    // Scroll handler 
 
    $(window).scroll(function() { 
 

 
    // Show the fixed black image when the stop div is in view 
 
    if($(this).scrollTop() < stopPosition-displayHeight || $(this).scrollTop() > stopPosition+stopHeight){ 
 
     $('#goSale').stop().animate({ 
 
     top: '65px' 
 
     }, 1); 
 

 
     // Else, hide it. 
 
    }else{ 
 
     $('#goSale').stop().animate({ 
 
     top: '-1000px' 
 
     }, 1); 
 
    } 
 
    }); 
 
});

#a,#b,#c{ 
 
    height:1000px; 
 
} 
 
#a{ 
 
    background-color:blue; 
 
} 
 
#b{ 
 
    background-color:orange; 
 
} 
 
#c{ 
 
    background-color:green; 
 
} 
 
#stop{ 
 
    height:300px; 
 
    border:10px solid red; 
 
} 
 
#goSale{ 
 
    position:fixed; 
 
    top:65px; 
 
    right:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="a"></div> 
 
<div id="stop"> 
 
    
 
    <h1>The phone number in the black image is not shown when I'm in view.</h1> 
 
    
 
</div> 
 
<div id="b"></div> 
 
<div id="c"></div> 
 
<img id="goSale" src="http://www.vichy.ho.ua/img/pages/sale.png">