github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

修复两栏布局不能固定 #profile 的问题 (#320)

pull/326/head
ZNEIAT 2018-04-30 23:06:32 +08:00 committed by Ruipeng Zhang
parent 29235f6d3a
commit a4ef07b8c4
1 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
source/js/main.js
View File

@ -43,77 +43,84 @@
e.stopPropagation(); e.stopPropagation();
}); });
// To Top & Fixed Profile // To Top
var sidebarElem = $('#sidebar'), var sidebarElem = $('#sidebar'),
toTopElem = $('#toTop'); toTopElem = $('#toTop');
if (sidebarElem.length) { (function () {
checkDisplayToTop(); if (!sidebarElem.length) return;
checkFixedProfile();
checkDisplayToTop();
$(document).on('scroll', function () { $(document).on('scroll', function () {
checkDisplayToTop(); checkDisplayToTop();
checkFixedProfile();
}); });
toTopElem.click(function () { toTopElem.click(function () {
$('body, html').animate({ scrollTop: 0 }, 600); $('body, html').animate({ scrollTop: 0 }, 600);
}); });
}
var isToTopDisplayed = false; var isToTopDisplayed = false;
function checkDisplayToTop() { function checkDisplayToTop() {
var toTop = (sidebarElem.height() - $(window).height()) + 60; var toTop = (sidebarElem.height() - $(window).height()) + 60;
var currentScrollTop = $(document).scrollTop(); var currentScrollTop = $(document).scrollTop();
var needDisplay = (currentScrollTop > toTop) && (currentScrollTop > 0); var needDisplay = (currentScrollTop > toTop) && (currentScrollTop > 0);
if ($(document).width() >= 800) { if ($(document).width() >= 800) {
if (needDisplay) { if (needDisplay) {
if (isToTopDisplayed) return; if (isToTopDisplayed) return;
toTopElem.fadeIn(); toTopElem.fadeIn();
toTopElem.css('left', sidebarElem.offset().left); toTopElem.css('left', sidebarElem.offset().left);
isToTopDisplayed = true; isToTopDisplayed = true;
} else {
if (!isToTopDisplayed) return;
toTopElem.fadeOut();
isToTopDisplayed = false;
}
} else { } else {
if (!isToTopDisplayed) return; toTopElem.show();
toTopElem.fadeOut(); toTopElem.css('right', 20);
isToTopDisplayed = false;
} }
} else {
toTopElem.show();
toTopElem.css('right', 20);
} }
} })();
var isFixedProfile = false; // Fixed Profile
function checkFixedProfile() { (function () {
if (!profileElem.is('.profile-fixed')) return; checkFixedProfile();
if ($(document).width() < 800) return; $(document).on('scroll', function () {
checkFixedProfile();
});
var currentScrollTop = $(document).scrollTop(); var isFixedProfile = false;
var profileInnerElem = $('#profile .profile-inner'); function checkFixedProfile() {
var needFixed = currentScrollTop >= profileElem.offset().top + profileElem.outerHeight(true); if (!profileElem.is('.profile-fixed')) return;
if ($(document).width() < 800) return;
if (needFixed) { var currentScrollTop = $(document).scrollTop();
if (isFixedProfile) return; var profileInnerElem = $('#profile .profile-inner');
var needFixed = currentScrollTop >= profileElem.offset().top + profileElem.outerHeight(true);
profileInnerElem.css('position', 'fixed') if (needFixed) {
.css('width', profileElem.innerWidth() + 'px') if (isFixedProfile) return;
.css('top', '0');
// css animation fade-in profileInnerElem.css('position', 'fixed')
profileInnerElem.css('animation', ''); .css('width', profileElem.innerWidth() + 'px')
profileInnerElem.addClass('anim-fade-in'); .css('top', '0');
isFixedProfile = true;
} else {
if (!isFixedProfile) return;
profileInnerElem.css('position', '') // css animation fade-in
.css('width', '') profileInnerElem.css('animation', '');
.css('top', ''); profileInnerElem.addClass('anim-fade-in');
isFixedProfile = true;
} else {
if (!isFixedProfile) return;
profileInnerElem.css('animation', 'none'); profileInnerElem.css('position', '')
isFixedProfile = false; .css('width', '')
.css('top', '');
profileInnerElem.css('animation', 'none');
isFixedProfile = false;
}
} }
} })();
})(jQuery); })(jQuery);