2017-12-27 505 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

是這樣的.... –