Merge Timo's changes

https://en.wikipedia.org/w/index.php?title=User%3AKrinkle%2Ftoc.js&diff=640305673&oldid=640198701
https://en.wikipedia.org/w/index.php?title=User%3AKrinkle%2Ftoc.css&diff=640306534&oldid=640305495

Closes #2

Author: prtksxna

ptoc.css

@@ -2,25 +2,25 @@
 	transition: 1s all ease;
 	display: block;
 	position: fixed;
-	top: 0px;
-	left: 0px;
-	border: none !important;
-	background: #f6f6f6 !important;
-	font-size: 0.8em !important;
-	min-width: 162px;
-	width: 162px;
+	top: 0;
+	left: 0;
+	border: none;
+	background: #f6f6f6;
+	font-size: 0.8em;
+	width: 10em;
+	height: 100%;
 	white-space: nowrap;
 	overflow: hidden;
 }
 
 .floatTOC ul ul {
-	margin: 0 0 0 1em
+	margin: 0 0 0 1em;
 }
 
 .floatTOC:hover {
 	width: auto;
 	overflow: auto;
-	box-shadow: 0 0 30px rgba( 0,0,0, 0.5) ;
+	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
 }
 
 .floatTOC > * {
@@ -29,6 +29,5 @@
 }
 
 .floatTOC:hover > * {
-	transition: 1s all ease;
 	opacity: 1;
 }

ptoc.js

@@ -1,49 +1,62 @@
-( function ( $ ) {
-
-    $( function () {
-	var $toc = $( '#toc' ),
-	    $window = $( window ),
-	    $mwPanel = $( '#mw-panel' ),
-	    tocLimit = $toc.offset().top + $toc.height(),
-	    $floatTOC = $toc
-	    .clone()
-	    .attr( 'id', '')
-	    .addClass( 'floatTOC' )
-	    .appendTo( 'body' )
-	    .css( 'height', $window.height() )
-	    .hide(),
-	    headingsOffset = [];
-
-	// Get all heading positions
-	$('.mw-headline').each( function() {
-	    headingsOffset.push( [ $(this).attr( 'id' ), $( this ).offset().top ] );
-	} );
+mw.loader.using( 'jquery.throttle-debounce', function () {
+	$( function () {
+		var $window, $mwPanel, $floatTOC, scrollHandler,
+			tocLimit, headingOffsets,
+			$toc = $( '#toc' );
+
+		if ( !$toc.length ) {
+			return;
+		}
+
+		$window = $( window );
+		$mwPanel = $( '#mw-panel' );
+		$floatTOC = $toc
+			.clone()
+			.removeAttr( 'id' )
+			.addClass( 'floatTOC' )
+			.appendTo( 'body' )
+			.hide();
+
+		tocLimit = $toc.offset().top + $toc.height();
+		headingOffsets = [];
 
-	// For the window scroll event
-	var scroller = function () {
-	    var scrollTop = $window.scrollTop();
-	    if ( scrollTop > tocLimit ) {
-		$floatTOC.show();
-		$mwPanel.hide();
-
-		// Highlight current
-		$floatTOC.find( 'a' ).css( 'font-weight', 'normal' )
-		var highlight = "";
-		$.each( headingsOffset, function ( i, v ) {
-		    if ( scrollTop < v[ 1 ]) {
-			highlight = headingsOffset[ i -1 ][ 0 ];
-			return false;
-		    }
+		// Get all heading positions
+		$('.mw-headline').each( function () {
+			headingOffsets.push( [ $( this ).attr( 'id' ), $( this ).offset().top ] );
 		} );
-		$floatTOC.find( 'a[href="#' + highlight + '"]' ).css( 'font-weight', 'bold' );
 
-	    } else {
-		$floatTOC.hide();
-		$mwPanel.show();
-	    }
-	}
+		// For the window scroll event
+		scrollHandler = function () {
+			var $current,
+			scrollTop = $window.scrollTop();
 
-	$window.on( 'scroll', $.throttle( 250, scroller ) );
-    } );
+			if ( scrollTop > tocLimit ) {
+				$floatTOC.show();
+				$mwPanel.hide();
 
-} ) ( jQuery );
+				// Highlight current
+				var highlight = false;
+				// Current section is above the first heading below the top of the screen
+				$.each( headingOffsets, function ( i, v ) {
+					// Skip first as there's no previous heading before the first
+					if ( i !== 0 && scrollTop < v[ 1 ] ) {
+						highlight = headingOffsets[ i - 1 ][ 0 ];
+						return false;
+					}
+				} );
+
+				if ( highlight ) {
+					$current = $floatTOC.find( 'a[href="#' + highlight + '"]' );
+					$floatTOC.find( 'a' ).not( $current ).css( 'font-weight', '' );
+					$current.css( 'font-weight', 'bold' );
+				}
+
+			} else {
+				$floatTOC.hide();
+				$mwPanel.show();
+			}
+		}
+
+		$window.on( 'scroll', $.throttle( 250, scrollHandler ) );
+	} );
+} );