Javascript 当该div位于顶部时，在另一个div的滚动条上显示一个div

我有两个列表，一个有更多的div文本，另一个有更多的div图像，每个文本匹配一个特定的图片。它们与数据属性链接

我想要的是-当你滚动时，它会显示与文本对应的图像（具有相同的数据属性）。每次文本到达滚动的div顶部时，它都必须改变。我想在Jquery或Js中这样做

<ul id="mylist" class="mylist">
    <li data-myId="465" class="mydiv">
        <h2>My tittle</h2>
        <p>texte></p>
    </li>
    <li data-myId="466" class="mydiv">
        <h2>My tittle</h2>
        <p>texte</p>
    </li>
</ul>
<ul id="mylist" class=« mylist ">
    <li data-myId="465 "  class="news-work ">
    <img>
    </li>
    <ul id="mylist " class=« mylist">
    <li data-myId="465" class="news-work">
        <img>
    </li>
</ul>

我的小秘密
文本>



我的小秘密
短信

为什么不将文本和图像放在同一个列表中，并使用CSS正确设置其样式？如果可以，我无法更改HTML