Question

我想创建一个粘性侧边栏。但粘性边栏应该只是粘贴，直到侧边栏的末尾达到指定的元素。

以下是我希望使用侧边栏的网页： https://digital-hacks.de/vpn-verbindung-einrichten/

您可以在头部或此处查看代码。

<script>
    var sidebar = $('#sidebar-content'),
        nav = $('.sidebar-content'),
        startPosition = sidebar .offset().top,
        stopPosition = $('#abspann').offset().top - nav.outerHeight();

    $(document).scroll(function () {
        //stick nav to top of page 
        var y = $(this).scrollTop()

        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        } 
    });
</script>

如果用户向下滚动，我希望侧边栏附加到屏幕上，如果侧边栏的结尾已到达元素#abspann，它应该结束。

但我的代码中出现错误： Uncaught TypeError: $ is not a function at (index):415

我怎样才能使这个工作？

我找到了源代码here。

问候

Answer 1

无法添加评论，以便发布作为答案。尝试在上面的代码中用jQuery替换$。希望它能解决错误。

Answer 2

我认为这会奏效。

<script>
    var nav = $('.sidebar-content'),
        startPosition = nav.offset().top,
        stopPosition = $('#abspann').offset().top - $(window).height();

    $(document).scroll(function () {
        //stick nav to top of page 
        var y = $(this).scrollTop()

        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        } 
    });
</script>

样式sticky课程，您需要position: fixed以及您需要做的其他调整。它在你的网站上工作了。我尝试使用控制台。

Answer 3

首先你必须用jQuery替换$然后尝试这个，

var sidebar = jQuery('#sidebar-wrap'),
    nav = jQuery('.sidebar-content'),
    startPosition = sidebar.offset().top,
    stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();

jQuery(document).scroll(function () {
    //stick nav to top of page
    var y = jQuery(this).scrollTop()

    if (y > startPosition) {
        nav.addClass('sticky');
        if (y > stopPosition) {
            nav.css('top', stopPosition - y);
        } else {
            nav.css('top', 0);
        }
    } else {
        nav.removeClass('sticky');
    } 
});

此外，您还必须在此处添加ID

<div class="wpb_wrapper" id="sidebar-wrap">

在侧边栏的包装中并添加粘贴样式

.sticky {
    position: fixed;
    top:0;
}

使用JavaScript粘贴侧边栏 - 仅限于指定元素

3 个答案: