Question

我想要一个棒棒棒棒。我搜索并找到了这段代码：

<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>

问题是它不起作用......我已经尝试用$替换jQuery但仍然......不起作用。唯一的原因可能是我仍然在控制台中出现的错误：

未捕获的TypeError：无法读取undefinedat的属性“top” （指数）：411

目前代码如下所示：

<script>
var sidebar = jQuery('#sidebar-wrap'),
    nav = jQuery('.sidebar-content'),
    startPosition = jQuery('#sidebar-wrap').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');
    } 
});
</script>

如果它正常工作，侧边栏应停在元素#abspann处。想知道。

我所谈论的网站是this。并且可以找到源代码here。

我怎样才能使这个工作？

亲切的问候

Answer 1

这是因为您的脚本在加载元素之前已加载，因此请使用$.ready()以便在使用之前每个元素都可用。

<script src="JQUERY_LIB_URL_HERE"></script>
<script>
    jQuery(function(){
       var sidebar = jQuery('#sidebar-wrap'),
        nav = jQuery('.sidebar-content'),
        startPosition = jQuery('#sidebar-wrap').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');
            } 
        });
    });
</script>

粘贴边栏 - 停在元素？

1 个答案: