Jquery 元素在扩展div中的位置取决于滚动位置

我在这里读了很多关于滚动位置的文章，但都没法让它工作。我正在使用一个JS插件创建一个图像网格，当我点击任何一个图像（.imagewrap）时，它会展开一个div（.colio content），该div是使用JS动态生成的，其中包含更多的内容。它还移动滚动条以将该div放置在窗口顶部

在div中，我有一些导航元素，例如关闭按钮（.colio close，用于折叠div）和下一个/上一个箭头（.colio prev和.colio next），用于转到下一个和上一个内容。它们在开始时都有一个固定的位置，当用户向下滚动时，我将它们更改为一个绝对位置。我尝试做的是在滚动到达某个位置时将它们再次更改为固定位置，以使它们始终保持在div内。我尝试根据滚动位置和div高度执行一些简单的算法，但正如您在这里看到的那样，它不起作用

我的JS代码是这样的

$('.imagewrap').on('click', function() {

    var $expandedHigh = $('.colio-content').height();
    var $expandedHighPercent = Math.round($expandedHigh/100);
    var $expandedHighTen = $expandedHighPercent*10;
    var $expandedHighTwenty = $expandedHighPercent*20;
    var $expandedHighThirty = $expandedHighPercent*30;


    $(function () {

        var $win = $(window);
        var $pos = 100;
        var $newPos = ($expandedHigh-$expandedHighTwenty);

        $win.scroll(function () {

            if ($win.scrollTop() <= $pos ){

                $('.colio-close').css({position: 'absolute',  top: ($expandedHighPercent*4)});
                $('.colio-prev, .colio-no-prev, .colio-next, .colio-no-next').css({position: 'absolute', top: ($expandedHighPercent*16)});

            }else{

                if ($win.scrollTop() >= $newPos){


                        $('.colio-close').css({position: 'absolute',  top: ($expandedHigh - $expandedHighTwenty)});
                        $('.colio-prev, .colio-no-prev, .colio-next, .colio-no-next').css({position: 'absolute', top: ($expandedHigh - $expandedHighTen)});


                }else{

                        if ($windowWidth <= 665){

                            $('.colio-close').css({position: 'fixed', top: ($expandedHighPercent*4.5)});
                            $('.colio-prev, .colio-no-prev, .colio-next, .colio-no-next').css({position: 'fixed', top: ($expandedHighPercent*16)});

                        }else{

                            $('.colio-close').css({position: 'fixed', top: ($expandedHighPercent*3)});
                            $('.colio-prev, .colio-no-prev, .colio-next, .colio-no-next').css({position: 'fixed', top: ($expandedHighPercent*16)});

                        }
                }
            }
        });
    });

});

$（'.imagewrap'）。在（'click'，function（）上{
var$expandedHigh=$（'.colio content'）.height（）；
变量$expandedHighPercent=数学圆（$expandedHigh/100）；
变量$expandedHighTen=$expandedHighPercent*10；
变量$ExpandedHighTown=$expandedHighPercent*20；
变量$ExpandedHighThree=$expandedHighPercent*30；
$（函数（）{
var$win=$（窗口）；
var$pos=100；
变量$newPos=（$expandedHigh-$ExpandedHighTown）；
$win.scroll（函数（）{
如果（$win.scrollTop（）=$newPos）{
$（'.colio close'）.css（{position:'absolute'，top:（$expandedHigh-$expandedhightwenth）}）；
$（'.colio prev、.colio no prev、.colio next、.colio no next'）.css（{位置：'absolute'，top:（$expandedHigh-$expandedHighTen）}）；
}否则{
如果（$windowWidth我可以帮你。但是请提供你网页的完整HTML。并将该HTML上的所有css、js和图像文件更改为包含Hi Kamarul的完整URL，非常感谢你的回复。如果你能帮助我，我很乐意，但不确定你需要什么，伙计。我很乐意为你提供你可能需要的所有内容。我无法在一个公共场合提供完整的HTML这里恐怕太长了。CSS和JS也一样。我想用URL就足够了。对不起，万一我误解了你。请让我知道你需要什么，我会给你的，但我无法将整个代码粘贴在这里。非常感谢你的帮助