添加支持固定 #profile (#318)

_config.yml.example

@@ -15,6 +15,7 @@ customize:
         url: images/logo.png
     profile:
         enabled: true # Whether to show profile bar
+        fixed: true
         avatar: css/images/avatar.png
         gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
         author: PPOffice

layout/common/profile.ejs

@@ -1,6 +1,6 @@
 <% var profile = theme.customize.profile; %>
 <% var tagCount = site.tags.filter(function(tag) { return tag.length; }).length; %>
-<aside id="profile">
+<aside id="profile" class="<%= (theme.customize.profile.fixed ? 'profile-fixed' : '')  %>">
     <div class="inner profile-inner">
         <div class="base-info profile-block">
             <img id="avatar" src="<%= ( profile.gravatar ? gravatar(profile.gravatar, 128) : url_for(profile.avatar)) %>" />

source/css/_partial/profile.styl

@@ -21,6 +21,7 @@
 #profile
     column(profile-column)
     display: none
+    margin-bottom: block-margin
     @media mq-normal
         display: block
     .inner
@@ -135,3 +136,14 @@
             &:after
                 z-index: 0
                 border-color: transparent transparent color-border - #111 transparent
+
+    .anim-fade-in
+        animation-name: fadeIn
+        animation-fill-mode: both
+        animation-duration: .3s
+
+    @keyframes fadeIn
+        0%
+            opacity: 0
+        to
+            opacity: 1

source/js/main.js

@@ -1,5 +1,4 @@
 (function($){
-    var toTop = ($('#sidebar').height() - $(window).height()) + 60;
     // Caption
     $('.article-entry').each(function(i) {
         $(this).find('img').filter(function (element) {
@@ -34,32 +33,87 @@
     }
 
     // Profile card
+    var profileElem = $('#profile');
     $(document).on('click', function () {
-        $('#profile').removeClass('card');
+        profileElem.removeClass('card');
     }).on('click', '#profile-anchor', function (e) {
         e.stopPropagation();
-        $('#profile').toggleClass('card');
+        profileElem.toggleClass('card');
     }).on('click', '.profile-inner', function (e) {
         e.stopPropagation();
     });
 
-    // To Top
+    // To Top & Fixed Profile
-    if ($('#sidebar').length) {
+    var sidebarElem = $('#sidebar'),
+        toTopElem = $('#toTop');
+
+    if (sidebarElem.length) {
+        checkDisplayToTop();
+        checkFixedProfile();
+
         $(document).on('scroll', function () {
-            if ($(document).width() >= 800) {
+            checkDisplayToTop();
-                if(($(this).scrollTop() > toTop) && ($(this).scrollTop() > 0)) {
+            checkFixedProfile();
-                    $('#toTop').fadeIn();
+        });
-                    $('#toTop').css('left', $('#sidebar').offset().left);
+
-                } else {
+        toTopElem.click(function () {
-                    $('#toTop').fadeOut();
-                }
-            } else {
-                $('#toTop').fadeIn();
-                $('#toTop').css('right', 20);
-            }
-        }).on('click', '#toTop', function () {
             $('body, html').animate({ scrollTop: 0 }, 600);
         });
     }
 
+    var isToTopDisplayed = false;
+    function checkDisplayToTop() {
+        var toTop = (sidebarElem.height() - $(window).height()) + 60;
+        var currentScrollTop = $(document).scrollTop();
+        var needDisplay = (currentScrollTop > toTop) && (currentScrollTop > 0);
+
+        if ($(document).width() >= 800) {
+            if (needDisplay) {
+                if (isToTopDisplayed) return;
+                toTopElem.fadeIn();
+                toTopElem.css('left', sidebarElem.offset().left);
+                isToTopDisplayed = true;
+            } else {
+                if (!isToTopDisplayed) return;
+                toTopElem.fadeOut();
+                isToTopDisplayed = false;
+            }
+        } else {
+            toTopElem.show();
+            toTopElem.css('right', 20);
+        }
+    }
+
+    var isFixedProfile = false;
+    function checkFixedProfile() {
+        if (!profileElem.is('.profile-fixed')) return;
+        if ($(document).width() < 800) return;
+
+        var currentScrollTop = $(document).scrollTop();
+        var profileInnerElem = $('#profile .profile-inner');
+        var needFixed = currentScrollTop >= profileElem.offset().top + profileElem.outerHeight(true);
+
+        if (needFixed) {
+            if (isFixedProfile) return;
+
+            profileInnerElem.css('position', 'fixed')
+                .css('width', profileElem.innerWidth() + 'px')
+                .css('top', '0');
+
+            // css animation fade-in
+            profileInnerElem.css('animation', '');
+            profileInnerElem.addClass('anim-fade-in');
+            isFixedProfile = true;
+        } else {
+            if (!isFixedProfile) return;
+
+            profileInnerElem.css('position', '')
+                .css('width', '')
+                .css('top', '');
+
+            profileInnerElem.css('animation', 'none');
+            isFixedProfile = false;
+        }
+    }
+
 })(jQuery);