Question

当页面滚动到小于1400（<1400）时，有一个显示某个div的脚本，如果div隐藏了超过1400。但是我需要那个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 - 右上方黑色立方体和其他左侧和右侧“滚动”元素，如Youtube和其他...

Answer 1

所以你希望当另一个特定的div在视野中时隐藏它。好吧，你必须知道该div的位置，并使用该数字调整滚动比较。

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

用户的屏幕高度
“stop div”的最高位置
“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">

滚动到div id，堆栈和“停止”div id隐藏（不是smoth滚动）

1 个答案: