对于小页面高度，如何使粘性侧边栏元素恢复为非粘性行为？

Question

我正在尝试使粘性侧栏在各种使用情况下都能正常运行。

这是页面，它表现良好：

https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20

这是页面运行不正常的页面：

https://guitar-dreams.com/guitar-lesson/introduction-to-the-major-scale/34

今天在主体内容具有足够高度的情况下花了很多时间使事情起作用。现在只是注意到，当某些页面的主体内容很少时，sidebar元素的表现就不太好。您可以在上面的第二个链接中看到我的意思。

以下是控制粘性行为的代码：

$(function() {
                const sidebar = $('#sidebar-container');
                const widget = $('#leftsidebar');
                const footer = $('#footer');
                const space = 1; // arbitrary value to create space between the window and widget
                const startTop = sidebar.offset().top + 1; // arbitrary start top position
                const endTop = footer.offset().top - widget.height() - space;

                widget.css('top', startTop);

                $(window).scroll(function() {

                    let windowTop = $(this).scrollTop();
                    let widgetTop = widget.offset().top;
                    let newTop = startTop;

                    // update this condition to change hide logic
                    if(windowTop >= (footer.offset().top-700)){
                        widget[0].style.display = "none";
                    } else {
                        widget[0].style.display = "inline-block";
                    }

                    if (widgetTop >= startTop && widgetTop <= endTop) {
                        if (windowTop > startTop - space && windowTop < endTop - space) {
                            newTop = windowTop + space;
                        } else if (windowTop > endTop - space) {
                            newTop = endTop;
                        }
                        widget.stop().animate({
                            'top': newTop
                        });
                    }

                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 hidden-sm hidden-xs left-sidebar">
		
    <div class="menu block tile-default" id="sidebarmenu" style="border:0px;">
						<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
						<div class="pad">
							<ul class="nav nav-pills nav-stacked">
								@include('partials/menu')
							</ul>
						</div>
						<div style="background-color: white; height: 10px; border:0px"></div>

						
						<div id="sidebar-container">
							<div id="leftsidebar">
								<h4 class="text-center">Register for Free Live Video Webinar!</h4>
								<a href="https://zoom.us/webinar/register/WN_Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
									<br>
									<h4 class="text-center">Triad Chords Everywhere!</h4>
									<img class = "img-responsive" src="/img/chordswebinargraphic.png" alt="..." width="300" height="309">
									<div class="caption">

										<p style="background-color: #c8d9fe ; padding: 4px;">Set out on a path to master chords on the guitar. Understanding triads is the key to learning more advanced chord concepts such as 7th chords, extended chords, altered chords, hybrid chords, chord substitution, and more.</p>
										<p>When: 7 September, 1:00 PM</p>
										<p>Duration: 90 Minutes</p>
									</div>
									<div class="countdown" id="timer">
										<div id="days"></div>
										<div id="hours"></div>
										<div id="minutes"></div>
									</div>
								</a>
							</div>
						</div>
					</div>


		    @yield('side-column')

		   
	

		    <?php /* @include('partials/popular-lessons') */ ?>

				</div>
		<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
		

			@yield('main-column')

		</div>

		<div class="col-xs-12 visible-xs visible-sm">

			@yield('side-column')

		</div>
	</div>

所以我想我需要某种逻辑来检查主体的高度（对于粘性的侧边栏元素比内容物高的情况），然后在这种情况下，让粘性的侧边栏元素高度迫使页脚下降，对于侧边条在这种情况下，其行为就像普通的侧边栏元素一样。有道理吗？