Nofated095
/
hexo-theme-amane
mirror of https://github.com/Nofated095/hexo-theme-amane.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

redesign button toTop, show or hide button improved (#137) 

* redesign button toTop, show or hide automatically when scroll the page

* redesign button toTop, show or hide button improved

* button toTop with border-radius 4
This commit is contained in:
Glauber 2016-04-23 01:53:22 -03:00 committed by Ruipeng Zhang
parent ad5f6ce2d3
commit b317924366
3 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/common/sidebar.ejs
View File

@ -1,6 +1,6 @@
<aside id="sidebar"> <aside id="sidebar">
<% theme.widgets.forEach(function(widget) { %> <% theme.widgets.forEach(function(widget) { %>
<%- partial('widget/' + widget) %> <%- partial('widget/' + widget) %>
<% }) %> <% }) %>
<div id="toTop" class="fa fa-chevron-up"></div> <div id="toTop" class="fa fa-angle-up"></div>
</aside> </aside>

32
source/css/_partial/sidebar.styl
View File

@ -84,28 +84,30 @@
#toTop #toTop
@extend $block @extend $block
display: none
cursor: pointer cursor: pointer
text-align: center text-align: center
width: 64px width: 60px
height: 64px height: 60px
color: white color: white
font-size: 32px font-size: 50px
line-height: 64px line-height: 55px
background: color-default background: color-default
opacity: 0.8
border-radius: 4px border-radius: 4px
bottom: 20px
position: fixed
@media mq-mobile @media mq-mobile
width: 54px width: 52px
height: 54px height: 52px
font-size: 28px font-size: 34px
line-height: 54px line-height: 52px
@media mq-mini @media mq-mini
width: 54px width: 48px
height: 54px height: 48px
font-size: 28px font-size: 32px
line-height: 54px line-height: 48px
&.fix
bottom: 20px
position: fixed
#recent-post #recent-post
li li

11
source/js/main.js
View File

@ -1,6 +1,5 @@
(function($){ (function($){
var toTop = $('#toTop').length ? $('#toTop').offset().top - $(window).height() + 20 : 0; var toTop = ($('#sidebar').height() - $(window).height()) + 60;
// Caption // Caption
$('.article-entry').each(function(i){ $('.article-entry').each(function(i){
$(this).find('img').each(function(){ $(this).find('img').each(function(){
@ -36,14 +35,14 @@
// To Top // To Top
$(document).on('scroll', function () { $(document).on('scroll', function () {
if ($(document).width() >= 800) { if ($(document).width() >= 800) {
if($(this).scrollTop() > toTop) { if(($(this).scrollTop() > toTop) && ($(this).scrollTop() > 0)) {
$('#toTop').addClass('fix'); $('#toTop').fadeIn();
$('#toTop').css('left', $('#sidebar').offset().left); $('#toTop').css('left', $('#sidebar').offset().left);
} else { } else {
$('#toTop').removeClass('fix'); $('#toTop').fadeOut();
} }
} else { } else {
$('#toTop').addClass('fix'); $('#toTop').fadeIn();
$('#toTop').css('right', 20); $('#toTop').css('right', 20);
} }
}).on('click', '#toTop', function () { }).on('click', '#toTop', function () {