Permalink
Browse files

Merge pull request #201 from Gulix/pr/200

Related to #128 - Scroll with big cards
  • Loading branch information...
Gulix committed Nov 21, 2017
2 parents 837b0d4 + c65ec5e commit 2ab113194dc2fef640cb802345bf0ff74af4d8b7
Showing with 38 additions and 14 deletions.
  1. +38 −14 src/js/main.js
@@ -99,27 +99,51 @@ require(['knockout',
/* Scrolling let's the Canvas on top (see also Issue #87) */
$(window).scroll(function(){
// Difference between normal height and revised height of the canvas
var existingDiff = $('#card-canvas-header').outerHeight();
var canvasHeaderHeight = $('#card-canvas-header').outerHeight();
// Position of the scroll on the Viewport
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
// Top position of the Canvas
var boxTop = $('#card-canvas-box').offset().top;
var canvasHeight = $('#card-canvas-view').outerHeight();
/*
console.log("######### START SCROLLING ");
console.log("canvasHeaderHeight : " + canvasHeaderHeight);
console.log("scrollTop : " + scrollTop);
console.log("viewportHeight : " + viewportHeight);
console.log("boxTop : " + boxTop);
console.log("canvasHeight : " + canvasHeight);
*/
if (canvasHeight > viewportHeight) return;
// If the ScrollPosition is beneath the top of the canvas, the canvas is lowered
//if (scrollTop > (boxTop + existingDiff)) {
// var diff = scrollTop - boxTop - existingDiff;
// if ((viewportHeight < canvasHeight) && (diff > (canvasHeight - viewportHeight))) {
// diff -= (canvasHeight - viewportHeight) + existingDiff;
// }
// $('#card-canvas-view').css({'margin-top': diff + 'px'});
//} else {
// $('#card-canvas-view').css({'margin-top': '0px'});
//}
//$('#card-canvas-view').toggleClass('scrolling-position', $(window).scrollTop() > $('#card-canvas-box').offset().top);
if (scrollTop > (boxTop + canvasHeaderHeight)) {
var diff = scrollTop - boxTop - canvasHeaderHeight;
/*
console.log("Scroll under the canvas ...");
console.log("diff : " + diff);
*/
if (viewportHeight < canvasHeight)
{
//console.log("canvas bigger than viewport");
if (diff > (canvasHeight - viewportHeight))
{
//console.log("Displaying bottom of the canvas");
diff -= (canvasHeight - viewportHeight) + canvasHeaderHeight;
}
}
//console.log("diff modified : " + diff);
$('#card-canvas-view').css({'margin-top': diff + 'px'});
} else {
$('#card-canvas-view').css({'margin-top': '0px'});
}
//console.log("######### END SCROLLING ");
$('#card-canvas-view').toggleClass('scrolling-position', $(window).scrollTop() > $('#card-canvas-box').offset().top);
});

0 comments on commit 2ab1131

Please sign in to comment.