Question

我希望获得一个固定的侧边栏，它会滚动到div的底部，然后会变成一个绝对定位的元素，以阻止它继续向下移动。

向上滚动时，侧边栏返回固定位置。侧边栏需要继承与其旁边的列相同的高度，以使固定的侧边栏看起来不奇怪。调整屏幕大小以匹配列时，侧栏的大小需要更改。

到目前为止，我已经能够：

创建继承列高度的代码并将其应用于div。
使重新计算窗口高度的代码调整大小。
使用固定更改定位的代码 - ＆gt;绝对的，反之亦然

我已经让代码计算了div应该滚动多远但是这是我遇到问题的地方：

我需要它来更新它在窗口调整大小时相对于侧边栏滚动的距离（我认为这意味着只是在调整大小内部再次运行脚本我不太确定）
计算滚动的距离是相对于用户浏览器的高度，因此在15英寸屏幕上与23英寸屏幕相比不会滚动到正确的点

我正在寻找一些帮助来制作脚本，以便计算在调整大小时应该滚动的距离，以便创建无缝体验。

除了帮助找出正确使用的方程式，因此它在浏览器窗口的所有实例中都能正确显示。

的Javascript

    $(document).ready(function() {

    var offsetHeight = document.getElementById('main-column').offsetHeight;
    document.getElementById('main-sidebar').style.height = offsetHeight+'px';

    function updateHeight() {
      var offsetHeight = document.getElementById('main-column').offsetHeight;
      document.getElementById('main-sidebar').style.height = offsetHeight+'px';
    }

    $(window).resize(updateHeight).trigger('resize')

    $(window).bind('scroll', function() {
        if($(window).scrollTop() >= 40 + $('#main-sidebar').offset().top + offsetHeight - window.innerHeight) {
            $('.sidebar-wrap').addClass('scroll');
        } else {
            $('.sidebar-wrap').removeClass('scroll');
        }
    });
});

HTML

<div class="main-page">
    <div class="row-2col-left">
        <div class="column" id="main-column">
            <?php
                if ( function_exists('yoast_breadcrumb') ) {
                    yoast_breadcrumb('
                    <p id="breadcrumbs">','</p>
                    ');
                }
            ?>
            <?php if (have_posts()) :
               while (have_posts()) :
                  the_post();
                     the_content();
               endwhile;
            endif; ?>
        </div>
        <div class="sidebar" id="main-sidebar">
            <div class="sidebar-wrap" id="sidebar-wrap">
                <?php get_sidebar('sidebar-1'); ?>
                <p>test</p>
            </div>
        </div>
    </div>
</div>

SCSS / CSS

.wrap {

    .main-page {


        .row-2col-left {

            .sidebar {
                position: relative;
                width: 30%;

                .sidebar-wrap {
                    position: fixed;
                }

                .sidebar-wrap.scroll {
                    position: absolute;
                    bottom: 0;
                }
            }

            .column {
                width: 70%;
            }
        }
    }
}

Answer 1

我通过编辑用于计算滚动距离的代码来修改它：

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= offsetHeight - 100) {
        $('.sidebar-wrap').addClass('scroll');
    } else {
        $('.sidebar-wrap').removeClass('scroll');
    }
});

因为我们已经知道offsetHeight等于侧边栏高度的值，所以我随后减去了值，直到它流畅为止。如果您要使用此代码，我相信您必须更改 - 100 的值才能使其正常工作。

编辑：我把它全部变成了1个函数并启用了所有内容来更新窗口调整大小，只有在调整大小完成后才会触发。

<script type="text/javascript">

$(document).ready(function() {

    function updateScroll() {

        var offsetHeight = document.getElementById('main-column').offsetHeight;
        document.getElementById('main-sidebar').style.height = offsetHeight+'px';

        $(window).bind('scroll', function() {
            if($(window).scrollTop() >= offsetHeight - 100) {
                $('.sidebar-wrap').addClass('scroll');
            } else {
                $('.sidebar-wrap').removeClass('scroll');
            }
        });
    }

        $(window).resize(updateScroll).trigger('resize')
    });
</script>

固定边栏，相对高度和流体绝对过渡

1 个答案: