添加支持固定 #profile (#318)
This commit is contained in:
parent
633f3ad714
commit
29235f6d3a
|
@ -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
|
||||
|
|
|
@ -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)) %>" />
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
if ($('#sidebar').length) {
|
||||
// To Top & Fixed Profile
|
||||
var sidebarElem = $('#sidebar'),
|
||||
toTopElem = $('#toTop');
|
||||
|
||||
if (sidebarElem.length) {
|
||||
checkDisplayToTop();
|
||||
checkFixedProfile();
|
||||
|
||||
$(document).on('scroll', function () {
|
||||
if ($(document).width() >= 800) {
|
||||
if(($(this).scrollTop() > toTop) && ($(this).scrollTop() > 0)) {
|
||||
$('#toTop').fadeIn();
|
||||
$('#toTop').css('left', $('#sidebar').offset().left);
|
||||
} else {
|
||||
$('#toTop').fadeOut();
|
||||
}
|
||||
} else {
|
||||
$('#toTop').fadeIn();
|
||||
$('#toTop').css('right', 20);
|
||||
}
|
||||
}).on('click', '#toTop', function () {
|
||||
checkDisplayToTop();
|
||||
checkFixedProfile();
|
||||
});
|
||||
|
||||
toTopElem.click(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);
|
||||
|
|
Loading…
Reference in New Issue