如何動態設置頂部的CSS當元素在頂部頁面或底部頁面？

如何在頂部頁面或底部頁面上顯示元素時動態設置頂部CSS？如何動態設置頂部的CSS當元素在頂部頁面或底部頁面？

首先，鼠標放在第一隻貓的圖像上。這是確定

http://image.ohozaa.com/i/480/7YpWei.jpg

當我再次滾動頁面底部，鼠標第一貓形象，

http://image.ohozaa.com/i/5b5/l2l3dj.jpg

大型貓科動物圖片在頁面頂部

，當我滾動頁面頂部和鼠標3貓圖像再次，

http://image.ohozaa.com/i/5db/ezZE1b.jpg

底部的大貓形象

如何將鼠標懸停在效果元素上的頂部css改爲不在首頁或底部頁面上方？

http://jsfiddle.net/L7Lyjtp7/

的index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

<style type="text/css"> 
<?PHP 
    for($i=0;$i<3;$i++) 
    { 
?> 
     .top_box<?PHP echo $i; ?>{ 
     left: 99px; 
     top: 0px; 
     position: absolute; 
     border: 1px solid #000; 
display: none; 
     } 
<?PHP 
    } 
?> 
</style> 

<?PHP 
    for($i=0;$i<3;$i++) 
{ 
?> 
<script type="text/javascript"> 
$(document).ready(function(){  
    $("#thumbnail<?PHP echo $i ; ?>").hover(
     function(){ 
      var id = $(this).data("id"); 
      if(id!==undefined){ 
      $("#" + id).show(); 
      } 
      $("#top_box<?PHP echo $i; ?>").show(); 

     },function(){ 
      $("#top_box<?PHP echo $i; ?>").hide(); 

     }); 
}); 
</script> 
<?PHP 
    } 
?> 
</head> 

<br><br><br><br><br><br><br><br><br><br> 
<div style=" float: left; position: relative; width: 100%; margin-bottom: 200px; " > 
    <div id="top_box0" class="top_box0"> 
     <img src="http://consciouscat.net/wp-content/uploads/2010/02/cat-licks-lips-200px.jpg"> 
    </div> 
    <span id="thumbnail0" style=" margin: 7px; position: relative;"> 
     <img border="0" src="http://consciouscat.net/wp-content/uploads/2010/02/cat-licks-lips-200px.jpg" width="80" height="80"/>     
    </span> 
</div> 
<br> 
<div style=" float: left; position: relative; width: 100%; margin-bottom: 200px; " > 
    <div id="top_box1" class="top_box1"> 
     <img src="http://cat-bounce.com/cb.png"> 
    </div> 
    <span id="thumbnail1" style=" margin: 7px; position: relative; "> 
     <img border="0" src="http://cat-bounce.com/cb.png" width="80" height="80"/>     
    </span> 
</div> 
<br> 
<div style=" float: left; position: relative; width: 100%; margin-bottom: 200px; " > 
    <div id="top_box2" class="top_box2"> 
     <img src="http://media.yopi.co.th/prod_pics/12/e/12827.jpg"> 
    </div> 
    <span id="thumbnail2" style=" margin: 7px; position: relative;"> 
     <img border="0" src="http://media.yopi.co.th/prod_pics/12/e/12827.jpg" width="80" height="80"/>     
    </span> 
</div>

來源

2014-10-09 nomwery geqoilu

我不明白，jsfiddle演示中的'首頁'和'底頁'是什麼？貓圖像是否顯示在其他元素上？ – 2014-10-09 09:08:39

這可能有所幫助：http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – 2014-10-09 11:44:06

您可以將CSS設置爲固定的，像這樣：JSFIDDLE 但是如果你想要將貓旁邊的圖像出現，您可以添加jQuery來計算，如果圖像位於「首頁」/「底部頁面」並根據需要設置固定位置。

.top_box0{ 
    left: 99px; 
    top: 0px; 
    position: fixed; 
    border: 1px solid #000; 
    display: none; 
} 
.top_box1{ 
    left: 99px; 
    top: 0px; 
    position: fixed; 
    border: 1px solid #000; 
    display: none; 
} 
.top_box2{ 
    left: 99px; 
    top: 0px; 
    position: fixed; 
    border: 1px solid #000; 
    display: none; 
}

來源

2014-10-09 11:18:03

如何動態設置頂部的CSS當元素在頂部頁面或底部頁面？

回答

相關問題