Changeset 30025

Timestamp:

10/26/2014 03:03:45 PM (10 years ago)

Author:

iandstewart

Message:

Twenty Fifteen: If the sidebar is taller than the viewport scroll it with the content, if it's shorter keep it fixed.

Props mattwiebe, iamtakashi, avryl, fixes #29979.

Location:

trunk/src/wp-content/themes/twentyfifteen

Files:

• js/functions.js (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentyfifteen/js/functions.js

@@ -7 +7 @@
 
 ( function( $ ) {
+    var $body, $window, sidebar, toolbarOffset;
+
     $( 'html' ).removeClass( 'no-js' );
 
@@ -48 +50 @@
         } );
     } )();
+
+
+    // Sidebar (un)fixing: fix when short, un-fix when scroll needed
+    $body         = $( 'body' );
+    $window       = $( window );
+    sidebar       = $( '#sidebar' )[0];
+    toolbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
+
+    function fixedOrScrolledSidebar() {
+        if ( $window.width() >= 955 ) {
+            if ( sidebar.scrollHeight < ( $window.height() - toolbarOffset ) ) {
+                $body.addClass( 'sidebar-fixed' );
+            } else {
+                $body.removeClass( 'sidebar-fixed' );
+            }
+        } else {
+            $body.removeClass( 'sidebar-fixed' );
+        }
+    }
+
+    function debouncedFixedOrScrolledSidebar() {
+        var timeout;
+        return function() {
+            clearTimeout( timeout );
+            timeout = setTimeout( function() {
+                timeout = null;
+                fixedOrScrolledSidebar();
+            }, 150 );
+        };
+    }
+
+    $window.on( 'load.twentyfifteen', fixedOrScrolledSidebar ).on( 'resize.twentyfifteen', debouncedFixedOrScrolledSidebar() );
+
 } )( jQuery );

trunk/src/wp-content/themes/twentyfifteen/style.css

@@ -3804 +3804 @@
 @media screen and (min-width: 59.6875em) {
     body:before,
-    .site-header,
-    .main-navigation,
-    .social-navigation,
-    .widget {
+    .sidebar-fixed .site-header,
+    .sidebar-fixed .main-navigation,
+    .sidebar-fixed .social-navigation,
+    .sidebar-fixed .widget {
         -webkit-transform: translateZ(0); /* Fixes flashing bug with scrolling on iOS Safari */
+    }
+
+    .sidebar-fixed .sidebar {
+        position: fixed;
     }
 
@@ -3831 +3835 @@
     .sidebar {
         float: left;
-        height: 100%;
         margin-right: -100%;
         max-width: 413px;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */
-        position: fixed;
+        position: relative;
         width: 29.4118%;
-    }
-
-    .admin-bar .sidebar {
-        height: -webkit-calc(100% - 32px);
-        height: calc(100% - 32px);
     }