fix up sidebar jitter

lms/static/js/discussions-temp.js

@@ -272,34 +272,91 @@ function setFormTopic(e) {
 	$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
 }
 
-function updateSidebarCoordinates(e) {
-	scrollTop = $(window).scrollTop();
-	sidebarXOffset = $('.discussion-column').offset().top;
-
-	var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
+//function updateSidebarCoordinates(e) {
+//	scrollTop = $(window).scrollTop();
+//	sidebarXOffset = $('.discussion-column').offset().top;
+//
+//	var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
+//
+//	var discussionColumnHeight = $('.discussion-column').height();
+//	marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop;
+//
+//	$sidebar.css('margin-top', marginTop);
+//	updateSidebarDimensions();
+//}
+//
+//function updateSidebarDimensions(e) {
+//	sidebarWidth = $sidebar.width();
+//
+//	var visibleHeader = sidebarXOffset - scrollTop > 0 ? sidebarXOffset - scrollTop : 0;
+//	sidebarHeight = $(window).height() - (visibleHeader + SIDEBAR_PADDING * 2);
+//	sidebarHeight = sidebarHeight > 500 ? sidebarHeight : 500;
+//
+//	var titleWidth = sidebarWidth - 115;
+//
+//	$sidebar.css('height', sidebarHeight + 'px');
+//
+//	if(!$postListWrapper[0]) {
+//		$postListWrapper = $('.post-list-wrapper');
+//	}
+//
+//	$postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px');
+//	$sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
+//}
 
-	var discussionColumnHeight = $('.discussion-column').height();
-	marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop;
+function updateSidebarCoordinates(e) {
+  if (!$('.sidebar').attr('data-top')){
+    if ($('.sidebar').hasClass('fixed')){
+      return;
+    }
+    var offset = $('.sidebar').offset();
+    $('.sidebar').attr('data-top', offset.top);
+  }
+  $('.sidebar').css('width', .32 * $('.discussion-body').width() + 'px');
+
+  scrollTop = $(window).scrollTop();
+  offset = $('.sidebar').attr('data-top');
+
+  if ((offset <= scrollTop)){
+    $('.sidebar').addClass('fixed');
+    $('.discussion-column').addClass('sidebar-fixed');
+  }else{
+    $('.sidebar').removeClass('fixed');
+    $('.discussion-column').removeClass('sidebar-fixed');
+  }
+
+  discussionColumnHeight = $('.discussion-column').outerHeight();
+  discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight;
+
+  windowHeight = $(window).height();
+
+  if((discussionColumnBottom - scrollTop) < windowHeight){
+    //difference = minHeight - (discussionColumnBottom - scrollTop);
+    //$('.sidebar').height(minHeight);
+    //console.log(minHeight);
+    //$('.sidebar').css('top', -difference);
+    //$('.post-list-wrapper').height(minHeight - SIDEBAR_HEADER_HEIGHT - 4);
+    $('.sidebar').removeClass('fixed');
+    $('.discussion-column').removeClass('sidebar-fixed');
+  }
 
-	$sidebar.css('margin-top', marginTop);
 	updateSidebarDimensions();
 }
 
 function updateSidebarDimensions(e) {
-	sidebarWidth = $sidebar.width();
 
-	var visibleHeader = sidebarXOffset - scrollTop > 0 ? sidebarXOffset - scrollTop : 0;
-	sidebarHeight = $(window).height() - (visibleHeader + SIDEBAR_PADDING * 2);
-	sidebarHeight = sidebarHeight > 500 ? sidebarHeight : 500;
+  discussionColumnHeight = $('.discussion-column').outerHeight();
+  discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight;
+  windowHeight = $(window).height();
+  $('.sidebar').height(discussionColumnHeight);
+  $('.post-list-wrapper').height(discussionColumnHeight - SIDEBAR_HEADER_HEIGHT - 4);
+  $('.sidebar').css('width', .32 * $('.discussion-body').width() + 'px');
 
-	var titleWidth = sidebarWidth - 115;
-
-	$sidebar.css('height', sidebarHeight + 'px');
-
-	if(!$postListWrapper[0]) {
-		$postListWrapper = $('.post-list-wrapper');
-	}
+  //$('.sidebar').height(discussionColumnBottom - scrollTop);
+  //$('.post-list-wrapper').height(discussionColumnBottom - scrollTop - SIDEBAR_HEADER_HEIGHT - 4);
 
-	$postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px');
-	$sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
+  //if((discussionColumnBottom - scrollTop) < windowHeight){
+  //  $('.sidebar').height(discussionColumnHeight);
+  //  $('.post-list-wrapper').height(discussionColumnHeight - SIDEBAR_HEADER_HEIGHT - 4);
+  //}
 }

lms/static/sass/_discussion.scss

@@ -551,6 +551,14 @@ body.discussion {
     background: #f6f6f6;
     border-radius: 3px 0 0 3px;
     border-right: 1px solid #bcbcbc;
+
+    &.fixed {
+      @include box-sizing(border-box);
+      position: fixed;
+      top: 0px;
+      width: 32%;
+    }
+
   }
 
   .browse-search {
@@ -1008,7 +1016,11 @@ body.discussion {
     background: #fff;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
     width: 68%;
-    min-height: 500px
+    min-height: 500px;
+
+    &.sidebar-fixed {
+      margin-left: 32%;
+    }
   }
 
   .discussion-article {