Question

我试图开发一个脚本，以避免当列不具有相同的高度时避免大的空白区域。为此，我想在滚动位置到达较小列的底部时将较小的列固定在位置上。只要滚动位置返回到列高度之下，该列就应该重新获得其初始属性。

实施例：第1列的高度为1000px 第2列的高度为800px 第3列的高度为1600px 如果我什么都不做，当我到达第3列的底部时，我只会在第1列和第2列看到空格。

因此，想法是在滚动位置超过1000 px时将第1列固定到位，当第2列超过800px时，将第1列固定。如果我回到页面顶部，那么应删除那些固定属性。

如果您对现有脚本有任何建议，我全押！：）

以下是我尝试继续的方式：

识别以相同高度开始的所有列，并添加一个名为＆＃34; group＆＃34;的属性。如果页面上有多组列，则为其分配值：
...
将所有初始左侧位置，顶部位置，底部位置存储为特定属性，我最终得到类似的内容：
......
每当滚动位置超过＆＃34; b＆＃34;值，我将列放在位置：fixed将其从流中提取出来，因此我必须根据上一步中设置的w，h和b值重新定位其他列。

每当scolling位置回到b值之下时，我恢复所有初始参数。这是代码：

  $(window).scroll(function() 
    { 
        $('[group]').each(function(i, obj) 
            {
                screenheight = $(window).height();
                scrollposition = $(window).scrollTop()+screenheight;
                tempbottom = $(this).attr('b');
                templeft = $(this).attr('l');
                tempwidth = $(this).attr('w');

                if (scrollposition>tempbottom)
                    {
                        console.log('w'+tempwidth);
                        $(this).css('position','fixed');
                        $(this).css('width',tempwidth+'px');
                    }
                else
                    {
                        $(this).css('position','relative');
                    }
                $(this).css('left',templeft+'px');  
            });             

    });

该脚本按照我的预期执行，但我的列的宽度根本不受尊重。

实施例：第1列的初始宽度为300px，我在属性中看到w = 300，并使用上面的代码设置宽度。结果，该列以330像素结束并完全打击页面。

所有列的相同问题...为什么要添加这些像素？我真的不知道问题出在哪里。

由于劳伦

到达列底部时，jQuery修复了列

0 个答案: