115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
/**
|
|
* @Author: Bachir Soussi Chiadmi <bach>
|
|
* @Date: 12-09-2017
|
|
* @Email: bachir@figureslibres.io
|
|
* @Last modified by: bach
|
|
* @Last modified time: 12-09-2017
|
|
* @License: GPL-V3
|
|
*/
|
|
|
|
// var $ = require('jquery');
|
|
// https://plainjs.com
|
|
|
|
|
|
// jQuery(document).ready(function($) {
|
|
// console.log('Hello Jquery');
|
|
|
|
// var $window;
|
|
|
|
var init = function(){
|
|
console.log('UI init');
|
|
// $window = $(window);
|
|
// _____ __ _ __ __ _ __ __
|
|
// / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
|
|
// \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
|
|
// ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
|
|
// /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
|
|
// /____/
|
|
// https://codepen.io/chrissp26/pen/gBrdo?editors=0010
|
|
|
|
// var header_height = $('header').height();
|
|
var header_height = document.getElementsByTagName('header')[0].clientHeight;
|
|
console.log(header_height);
|
|
|
|
// var $sticky_clone_wrapper = $('<div>').addClass('sticky-clone-wrapper').appendTo('body');
|
|
var sticky_clone_wrapper = document.createElement('div');
|
|
sticky_clone_wrapper.classList.add('sticky-clone-wrapper');
|
|
document.body.append(sticky_clone_wrapper);
|
|
//
|
|
// var $stickies = $('h1.part-title').addClass('sticky').each(function(i){
|
|
// var $sticky = $(this);
|
|
// $sticky
|
|
// .data('originalPosition', $sticky.offset().top)
|
|
// .data('originalHeight', $sticky.outerHeight());
|
|
// });
|
|
var stickies = new Array();
|
|
Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
|
|
// console.log('sticky', e);
|
|
e._part = e.getAttribute('part');
|
|
stickies.push(e)
|
|
});
|
|
console.log('stickies', stickies);
|
|
|
|
//
|
|
// var OnScroll = function(event){
|
|
// var $last_sticky;
|
|
// $stickies.each(function(i){
|
|
// var $sticky = $(this);
|
|
// var pos = $sticky.data('originalPosition');
|
|
// if(pos < $window.scrollTop()+header_height){
|
|
//
|
|
// }
|
|
// // if(i == 1){
|
|
// // console.log(pos +" | "+$window.scrollTop());
|
|
// // }
|
|
// // if(pos < $window.scrollTop()+header_height){
|
|
// // if(!$sticky.is('.sticked')){
|
|
// // $sticky.addClass('sticked').clone().appendTo($sticky_clone_wrapper.empty());
|
|
// // }
|
|
// // }else{
|
|
// // if($sticky.is('.sticked')){
|
|
// // $sticky.removeClass('sticked');
|
|
// // $('.part-title[part="'+$sticky.attr('part')+'"]', $sticky_clone_wrapper).remove();
|
|
// // }
|
|
// // }
|
|
// });
|
|
// };
|
|
var last_sticky = "", sticked_sticky, clone;
|
|
var OnScroll = function(event){
|
|
// console.log('on scrool', event);
|
|
sticked_sticky = false;
|
|
for (var i = stickies.length-1; i >= 0; i--) {
|
|
if(stickies[i].getBoundingClientRect().top < header_height){
|
|
sticked_sticky = stickies[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (sticked_sticky) {
|
|
// console.log('sticked_sticky', sticked_sticky._part);
|
|
if(last_sticky !== sticked_sticky._part){
|
|
// console.log('new sticky', last_sticky);
|
|
// fill sticky_clone_wrapper
|
|
clone = sticked_sticky.cloneNode(true);
|
|
sticky_clone_wrapper.innerHTML = '';
|
|
sticky_clone_wrapper.appendChild(clone);
|
|
last_sticky = sticked_sticky._part;
|
|
}
|
|
}else{
|
|
// empty sticky_clone_wrapper
|
|
sticky_clone_wrapper.innerHTML = '';
|
|
}
|
|
};
|
|
|
|
//
|
|
// $window.on('scroll', OnScroll);
|
|
// console.log('window', window);
|
|
window.onscroll = OnScroll;
|
|
}
|
|
// });
|
|
|
|
|
|
module.exports = {
|
|
init : init
|
|
}
|