如何在元素位于首页或底页时动态设置顶部css

How to dynamic set top css when element over top page or bottom page?

本文关键字：动态 css 顶部 设置 首页 元素 于首页      更新时间：2023-09-26

当元素位于首页或底页时，如何动态设置顶部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>

您可以将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;
}
相关文章：