Difference between revisions of "Template:USTC-Software/js/addScrollBar"
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
$(document).ready(function () { | $(document).ready(function () { | ||
| − | + | class ScrollBar { | |
| − | + | constructor(){ | |
| − | + | this.show = false; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | // add the div we want to use | |
| + | appendScrollBar(){ | ||
| + | $('#HQ_page').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transition: all .3s ease-in-out">' + | ||
| + | '<img src="https://static.igem.org/mediawiki/2019/5/57/T--USTC-Software--scroll.png"/>' + | ||
| + | '<div class="position-relative backHead" style="width: 70px; height: 110px; top: -110px; cursor: pointer;"></div>' + | ||
| + | '</div>'); | ||
| + | } | ||
| + | // basic operation | ||
| + | maintainShow(){ | ||
| + | $(window).scroll(function () { | ||
| + | let toTop = $(document).scrollTop(); | ||
| + | if (toTop > 300 && !this.show){ | ||
| + | $(".scroll").css("bottom", "5%"); | ||
| + | console.log('gt 300px'); | ||
| + | this.show = true; | ||
| + | }else if(toTop <= 300 && this.show){ | ||
| + | $(".scroll").css("bottom", "100%"); | ||
| + | console.log('lt 300px'); | ||
| + | this.show = false; | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | // make the img clickable | ||
| + | listenForClick(){ | ||
| + | $('.backHead').on('click', function () { | ||
| + | $('body, html').animate({ | ||
| + | scrollTop: 0, | ||
| + | screenLeft: 0 | ||
| + | }, 300); | ||
| + | $(".scroll").css("bottom", "100%"); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | } | ||
| − | + | let scrollBar = new ScrollBar(); | |
| − | + | scrollBar.appendScrollBar(); | |
| − | + | scrollBar.maintainShow(); | |
| − | + | scrollBar.listenForClick(); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}); | }); | ||
Latest revision as of 13:59, 9 October 2019
$(document).ready(function () {
class ScrollBar {
constructor(){
this.show = false;
}
// add the div we want to use
appendScrollBar(){
$('#HQ_page').append('' +
');
'<img src="'' + '"/>' +
}
// basic operation
maintainShow(){
$(window).scroll(function () {
let toTop = $(document).scrollTop();
if (toTop > 300 && !this.show){
$(".scroll").css("bottom", "5%");
console.log('gt 300px');
this.show = true;
}else if(toTop <= 300 && this.show){
$(".scroll").css("bottom", "100%");
console.log('lt 300px');
this.show = false;
}
});
}
// make the img clickable
listenForClick(){
$('.backHead').on('click', function () {
$('body, html').animate({
scrollTop: 0,
screenLeft: 0
}, 300);
$(".scroll").css("bottom", "100%");
});
}
}
let scrollBar = new ScrollBar(); scrollBar.appendScrollBar(); scrollBar.maintainShow(); scrollBar.listenForClick();
});