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

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

pull/136/head
Glauber 2016-04-22 20:22:53 -03:00
parent ad5f6ce2d3
commit 8b76b5a0b1
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/common/sidebar.ejs
View File

@ -2,5 +2,5 @@
<% 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>

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

@ -84,25 +84,27 @@
#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
border-radius: 4px opacity: 0.8
border-radius: 50px
@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 &.fix
bottom: 20px bottom: 20px
position: fixed position: fixed

5
source/js/main.js
View File

@ -36,13 +36,16 @@
// 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() > 100) {
$('#toTop').fadeIn();
$('#toTop').addClass('fix'); $('#toTop').addClass('fix');
$('#toTop').css('left', $('#sidebar').offset().left); $('#toTop').css('left', $('#sidebar').offset().left);
} else { } else {
$('#toTop').fadeOut();
$('#toTop').removeClass('fix'); $('#toTop').removeClass('fix');
} }
} else { } else {
$('#toTop').fadeIn();
$('#toTop').addClass('fix'); $('#toTop').addClass('fix');
$('#toTop').css('right', 20); $('#toTop').css('right', 20);
} }