javascript - 滚动到 div id，堆栈和 "stop"div 之后隐藏(不平滑滚动)

Question

有一个脚本，当页面滚动到小于 1400 (<1400) 时显示一些 div，如果超过 1400 div 隐藏。但我需要那个 div 不是按高度 (1400) 而是按 div id 显示并按“停止”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 - 右上角的黑色立方体和其他左侧和右侧“滚动”元素，如 Youtube 和其他...

Answer 1

因此，当另一个特定的 div 出现在 View 中时，您希望它被隐藏。那么，您必须知道该 div 的位置并使用该数字调整滚动比较。

所以你必须进行 3 次测量:

1. 用户的屏幕高度
2. 你的“stop div”的顶部位置
3. 你的“stop div”的底部位置

然后，一些简单的数学...并与滚动位置进行比较。

$(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">