jq移动位置改变定位

当当前项目鼠标移到下面，图片顶到下面的时候，判断定位改变上下。
效果：

img


html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 效果测试 title>
    <script src="https://code.jquery.com/jquery-1.7.2.js">script>
head>
<body>

<style type="text/css">
*{margin:0px;padding:0px;list-style: none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration: none;}    
.box{width: 1000px;margin: 100px auto;padding: 20px 0;border: 2px #ddd solid;background: #dadada;}
.flow{padding: 0 80px;height: 400px;overflow-y: scroll;}
.force-overflow{min-height: 0px;}
.list{ }
.list li{border-bottom:1px #aaa solid;cursor: pointer;}
.list a{position: relative;display: block;}
.list .theme{display: flex;color:#000;padding: 15px 0;font-size: 20px;justify-content: space-between;align-items: center}
.list .pic{opacity: 0;display: flex;position: absolute;left:0;top: 70px;right:0;z-index: 2;margin: auto;max-width:40%;height:400px;transform:translateY(5px);transition: all .5s ease-in-out;align-items: center;justify-content: center;}
.list .pic img{/* width:100%; */height: 100%;object-fit: cover;}
.list li:hover h4{color:red }
.list li:hover .pic{opacity: 1;}
style>
<div class="box">
    <div class="flow">
      <ul class="list">
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 01h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 02h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 03h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 04h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 05h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 06h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 07h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 08h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 09h4><span>2022span>div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">div>
          a>
        li>
        
      ul>
      <div class="force-overflow">div>
    div>
  div>

<script>

script>  

body>
html>

hover的时候图片始终在中间如何，这样就不用根据距离判断图片到底是出现在上面还是下面


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 效果测试 </title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>

<body>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-decoration: none;
        }

        .box {
            width: 1000px;
            margin: 100px auto;
            padding: 20px 0;
            border: 2px #ddd solid;
            background: #dadada;
        }

        .flow {
            padding: 0 80px;
            height: 400px;
            overflow-y: scroll;
        }

        .force-overflow {
            min-height: 0px;
        }

        .list {
            position: relative
        }

        .list li {
            border-bottom: 1px #aaa solid;
            cursor: pointer;
        }

        .list a {
            /* position: relative; */
            display: block;
        }

        .list .theme {
            display: flex;
            color: #000;
            padding: 15px 0;
            font-size: 20px;
            justify-content: space-between;
            align-items: center
        }

        .list .pic {
            opacity: 0;
            display: flex;
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 2;
            margin: auto;
            max-width: 40%;
            height: 400px;
            transform: translate(-50%, -50%);
            transition: all .5s ease-in-out;
            align-items: center;
            justify-content: center;
        }

        .list .pic img {
            /* width:100%; */
            height: 100%;
            object-fit: cover;
        }

        .list li:hover h4 {
            color: red
        }

        .list li:hover .pic {
            opacity: 1;
        }
    </style>
    <div class="box">
        <div class="flow">
            <ul class="list">
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 01</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 02</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://img2.baidu.com/it/u=1249099614,3534836312&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=448"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 03</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 04</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 05</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 06</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 07</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 08</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="theme">
                            <h4>DATA - 09</h4><span>2022</span>
                        </div>
                        <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                    </a>
                </li>

            </ul>
            <div class="force-overflow"></div>
        </div>
    </div>

    <script>
    </script>

</body>

</html>
给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Jq开发遇到的问题

这个不是很清楚你描述的问题，如果只是图片跟着滑动的内容移动的话，可以实用fixed定位。也可以实用浮动或者flex布局，这个只是CSS就能实现

汗！如果你要图片没有变遮住，直接定fixed定位就可以的，这都不需要判断的吧，一直保持他在上面就可以了，还要判断，多次一举做什么？还以为你要做什么的呢