2017-12-27 1090 views
0

有一个脚本,显示一些股利时页面滚动到低于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和其他...

+1

我想你可以用这个制作小提琴。这就是将帮助我们和你们 – plonknimbuzz

+0

https://stackoverflow.com/questions/2928275/jquery-hide-div – JSnewbie

+0

@plonknimbuzz ... www.vichy.ho.ua--右上方的黑色立方体。 –

回答

1

所以,你要当另一个特定的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="http://www.vichy.ho.ua/img/pages/sale.png">

+0

是这样的.... –