Skip to content

Instantly share code, notes, and snippets.

@mmai

mmai/testscroll.html

Created April 3, 2018 08:13
Show Gist options
  • Save mmai/0990a287b44cca006aaae8f96dfcc749 to your computer and use it in GitHub Desktop.
Save mmai/0990a287b44cca006aaae8f96dfcc749 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
testscroll.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test scrolling</title>
<style>
.header {
clear:both;
}
#left {
background-color: gray;
width: 70%;
float: left;
}
#right {
background-color: lightblue;
width: 30%;
float: left;
top: 0em;
bottom: 0em;
overflow:auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function keepDivOn (divElem, biggerElem) {
if ($(divElem).height() > $(biggerElem).height()) return;
var hasAttr = function hasAttr(attrName, elem){
var attr = $(elem).attr(attrName);
return (typeof attr !== typeof undefined && attr !== false);
}
var getPos = function getPos(elem){
var hasLeft = hasAttr("left", elem);
var position = {
top: $(elem).offset().top,
left: hasLeft ? $(elem).attr("left") : $(elem).offset().left,
hasLeft: hasLeft
};
return position;
};
var stickyPos = getPos(divElem);
var isSticky = false;
var stickyRelocate = function stickyRelocate() {
var window_top = $(window).scrollTop();
if (window_top > stickyPos.top && !isSticky) {
stickyPos = getPos(divElem);
$(divElem).css('position', 'fixed');
$(divElem).css('left', stickyPos.left);
isSticky = true;
} else if (window_top < stickyPos.top ) {
$(divElem).css('position', 'relative');
$(divElem).css('left', stickyPos.hasLeft ? stickyPos.left : '');
isSticky = false;
}
};
$(window).scroll(stickyRelocate);
stickyRelocate();
}
$(function () {
keepDivOn($('#right'), $('#left'));
});
</script>
</head>
<body>
<div class="header">
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
</div>
<div id="left">
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p>
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
<!-- <p> loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum loremipsum </p> -->
</div>
<div id="right">
<p id="anchor-top">Début</p>
<p>window.top:<span id="wintop"></span></p>
<p>anchor.top:<span id="anchortop"></span></p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p> right right right right right right right right right right right right right right right right </p>
<p>Fin</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment