滚动到div的ID，堆叠后“停止” DIV ID隐藏（不smoth滚动）

  • Z时代
  • 2024-01-10
  • 分类：问答

有一个脚本，显示一些股利时页面滚动到低于1400（< 1400），如果超过1400 DIV是隐藏。但我需要该div显示不是由高度（1400），而是由div id和隐藏“停止”div。请你帮帮我。滚动到div的ID，堆叠后“停止” DIV ID隐藏（不smoth滚动）

<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和其他...

回答：

所以，你要当另一个特定的div是在它被隐藏视图。那么，你必须知道该div的位置，并使用该数字来调整你的滚动比较。

所以，你必须采取3次测量：

  1. 用户屏幕高度

  2. 的顶部位置的“停格”的

  3. 底部位置的“停格”

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

$(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="/wp-content/uploads/new2022/20220327voicc/22145719.png">

以上是 滚动到div的ID，堆叠后“停止” DIV ID隐藏（不smoth滚动） 的全部内容， 来源链接： utcz.com/qa/267136.html

回到顶部