Question

我一直在阅读很多关于滚动位置的线索，但无法使其工作。我正在使用JS插件来创建图像网格，当我点击任何这些图像（.imagewrap）时，它会扩展使用JS动态生成的div（.colio-content），其中包含更多内容。它还会移动滚动条，将div放在窗口顶部。

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

http://neuryvas.com/pruebas/

我有的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)});

                        }
                }
            }
        });
    });

});

请你帮我一臂之力吗？不知道如何控制这些参数，如果我用最好的方法来实现这一点。

非常感谢

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

0 个答案: