use new css property scroll-padding-top for fixed headers, fixes 140

components/tweeki-base.less

@@ -5,18 +5,22 @@
  * part of this has been taken from Garret LeSage's Strapping
  */
 
+html, body {
+	scroll-padding-top:60px;
+}
+
 
 /* correction for internal links with fixed navbar */
-.with-navbar.with-navbar-fixed .mw-headline {
-	padding-top: 70px;
-}
+//.with-navbar.with-navbar-fixed .mw-headline {
+//	padding-top: 70px;
+//}
 
 /* hack to make scrollspy work in safari, chrome etc. */
 /* mw-headline needs to consume space on the screen to be considered “visible” */
-.with-navbar.with-navbar-fixed .mw-headline {
-	padding-left:1px;
-	margin-left:-1px;
-}
+//.with-navbar.with-navbar-fixed .mw-headline {
+//	padding-left:1px;
+//	margin-left:-1px;
+//}
 
 
 /**

includes/Hooks.php

@@ -53,6 +53,8 @@ class TweekiHooks {
 	 * that we need for correct positioning for anchors and this would render links above headlines inaccessible
 	 */
 	public static function onOutputPageBeforeHTML( &$out, &$text ) {
+		// obsolete now with CSS's new scroll-padding-top
+		return true;
 		// Manipulation is harmful when executed on non-article pages (e.g. stops preview from working)
 		if( $out->isArticle() ) {
 			$doc = new DOMDocument();

tweeki.js

@@ -24,7 +24,7 @@ jQuery( function( $ ) {
 	// fade in initially hidden sticky footer
 	checkFooter();
 	$( '#footer.footer-sticky' ).animate( { opacity: 1 }, 1000 );
-	
+
 	// correct sticky footer on resize
 	$(window).resize(function() {
 		checkFooter();
@@ -56,7 +56,7 @@ jQuery( function( $ ) {
 		if( $( "#tweekiTOC" ).parents( ".sidebar-wrapper" ).length != 1 ) {
 			$( "#toc li" ).appendTo( "#tweekiTOC" );
 			$( "#tweekiDropdownTOC" ).show();
-			}
+		}
 		// or to sidebar?
 		else {
 			$( "#toc" ).appendTo( "#tweekiTOC" );
@@ -66,18 +66,18 @@ jQuery( function( $ ) {
 			/* $(window).resize(function() {
 				$("#tweekiTOC").height($(window).height()-$("#tweekiTOC").position().top-130);
 			}).resize(); */
-						
+
 			// show toc (hidden by default)
 			$( "#toc" ).css( 'display', 'table' );
-			
+
 			// start scrollspy
 			$( '#toc ul' ).addClass( 'nav' );	
-			$( 'body' ).css( 'position', 'relative' ).scrollspy( { target: '#toc' } );
-			}
-
+			$( 'body' ).css( 'position', 'relative' ).scrollspy( { target: '#toc', offset: 65 } );
 		}
 
-	
+	}
+
+
 	/**
 	 * HEADLINES
 	 *
@@ -97,42 +97,42 @@ jQuery( function( $ ) {
 	 */
 	// don't close dropdown when clicking in the login form
 	$( "#loginext" ).click( function( e ) {
-    e.stopPropagation();
-		});
+		e.stopPropagation();
+	});
 	// focus user name field
 	$( "#n-login-ext" ).click( function() {
 		if( ! $( this ).parent().hasClass( "open" ) ) {
 			setTimeout( '$( "#wpName2" ).focus();', 100 );
-			}
-		});
+		}
+	});
 
-        /**
-         * Fix VisualEditor scroll stickiness
-         *
-         * Had to use the child-parent methods below because the oo-ui-toolbar-bar
-         * class exists on multiple divs.
-         *
-         * The code calculates the navbar height and uses that number as the 'top'
-         * CSS attribute. This calculation is probably moot as it doesn't appear
-         * that the skin, or VisualEditor plays well on screen resolutions less
-         * than 1024 pixels wide. Left the code this way in case something with
-         * VE changes in the future.
-         *
-         **/
-         $(window).scroll( function ( e ) {
-                 // Check to see if the navbar-fixed-top class exists. If it
-                 // does then the navbar is fixed and run this code if
-                 if ( $( '.navbar-fixed-top').length ) {
-                         var $el = $('.oo-ui-toolbar-bar > .oo-ui-toolbar-actions');
-                         var $headerheight = $('#mw-head').height();
-                         var isPositionFixed = ($el.parent().css('position') == 'fixed');
-                         if ($(this).scrollTop() > $headerheight && !isPositionFixed){
-                                 $el.parent().css( 'top', $headerheight );
-                         }
-                         if ($(this).scrollTop() < $headerheight )
-                         {
-                                 $el.parent().css( 'top', '');
-                         }
-                 }
-              });
+	/**
+	 * Fix VisualEditor scroll stickiness
+	 *
+	 * Had to use the child-parent methods below because the oo-ui-toolbar-bar
+	 * class exists on multiple divs.
+	 *
+	 * The code calculates the navbar height and uses that number as the 'top'
+	 * CSS attribute. This calculation is probably moot as it doesn't appear
+	 * that the skin, or VisualEditor plays well on screen resolutions less
+	 * than 1024 pixels wide. Left the code this way in case something with
+	 * VE changes in the future.
+	 *
+	 **/
+	$(window).scroll( function ( e ) {
+		// Check to see if the navbar-fixed-top class exists. If it
+		// does then the navbar is fixed and run this code if
+		if ( $( '.navbar-fixed-top').length ) {
+			var $el = $('.oo-ui-toolbar-bar > .oo-ui-toolbar-actions');
+			var $headerheight = $('#mw-head').height();
+			var isPositionFixed = ($el.parent().css('position') == 'fixed');
+			if ($(this).scrollTop() > $headerheight && !isPositionFixed){
+				$el.parent().css( 'top', $headerheight );
+			}
+			if ($(this).scrollTop() < $headerheight )
+			{
+				$el.parent().css( 'top', '');
+			}
+		}
 	});
+});