Monday, March 7, 2016

Limit a DIV to Certain Scroll Height with Javascript

This is very popular nowadays. You can see major websites around the internet are having this feature. Why? Important information will not get left out if the web page is scrolled down a lot. This can improve the navigation experience of the website substantially. So how is it done? You may need to know how to fix a DIV before you can fully understand this post. Here are some of my earlier posts related to this subject:

http://webtrick101.blogspot.my/2015/11/fixing-several-divs-at-same-time-for.html
http://webtrick101.blogspot.my/2015/11/fix- div-on-top-of-page-only-after.html
http://webtrick101.blogspot.my/2015/11/fix-position-of-div-at-bottom-of-page.html

Here are the codes for this post:

<!DOCTYPE HTML>
<html>
<style type="text/css">

#fixbot {
bottom:0px;
position: fixed;
}

#fixright {
right:0px;
position: absolute;
}

#fixtop {
top:0px;
position: fixed;
}

</style>

<script>

var offset;

window.onscroll = function() {

 if (typeof(window.pageYOffset) == 'number') {
  offset = window.pageYOffset;
 }
 else if (document.documentElement) {
  offset = document.documentElement.scrollTop;
 }
 else if (document.body) {
  offset = document.body.scrollTop;
 }
 if (offset > 170) {
  document.getElementById('fixright').style.position = 'fixed';
  document.getElementById('fixright').style.top = '170px';
 }
 else {
  document.getElementById('fixright').style.position = 'absolute';
  document.getElementById('fixright').style.top = '50%';
 }
 document.getElementById('notice').innerHTML = offset;
}

</script>

<body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 onload="window.scrollTo(0,0);">

<div id="fixbot" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; ">
<p>Hello I am at the bottom!</p>
</div>

<div id="fixright" style="border:0px; width:100px; height:200px; text-align:center; padding:0px; top: 50%; margin-top: -100px; background-color:#cba;">
<table width=100% height=100%><tr><td valign=middle><p>Right!</p></td></tr></table>
</div>

<div id="fixtop" style="border:0px solid #333; width:100%; height:70px; background-color:#ddd; text-align:center; padding:0px; "> <p>Hello I am at the top! <span id="notice"></span></p>
</div>

<table width="95%" align=center><tr><td>
<br>line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10 <br>line 11<br>line 12<br>line 13<br>line 14<br>line 15<br>line 16<br>line 17<br>line 18<br>line 19<br>line 20 <br>line 21<br>line 22<br>line 23<br>line 24<br>line 25<br>line 26<br>line 27<br>line 28<br>line 29<br>line 30 <br>line 31<br>line 32<br>line 33<br>line 34<br>line 35<br>line 36<br>line 37<br>line 38<br>line 39<br>line 40 <br>line 41<br>line 42<br>line 43<br>line 44<br>line 45<br>line 46<br>line 47<br>line 48<br>line 49<br>line 50 <br>line 51<br>line 52<br>line 53<br>line 54<br>line 55<br>line 56<br>line 57<br>line 58<br>line 59<br>line 60 <br>line 61<br>line 62<br>line 63<br>line 64<br>line 65<br>line 66<br>line 67<br>line 68<br>line 69<br>line 70 </td></tr></table>

<script>
setTimeout(function() {window.scrollTo(0, 0);},100); // To make sure when the page is reloaded, the scroll is back to 0
document.getElementById('fixright').style.top = '50%';

</script>

</body>
</html>




In order to position a DIV on the middle of the right hand side, I prepare the DIV to be always 50% of the total height and the - 100px margin (derived from half of the total height of the DIV which is 200px in this case). In this example, I want to fix the right hand DIV to be exactly 70x from the top of the page. I need to let the Javascript to do the job for me by checking the mouse scroll offset. The magic 170px limit can be obtained from adding the half of the total height of the DIV with the target height limit.



The Javascript will detect the scroll offset if it crosses the 170px marking I set. If it is more than the 170px limit, fix the DIV. If it is less, let it scroll as it should be but maintain the 50% position relative to the viewable height of the website window.



One thing to pay attention is when the page is reloaded, the scroll has to go back to 0 or the calibration of the mechanism of these will be off. If this is not desired, one can consider resorting to cookie to track the relative position of the DIV and scroll offset. This is a head start to such new web feature. More complex feature can still be incorporated into these codes such as managing a very long (high) DIV. Enjoy!

Here is the animated demonstration of this example:



No comments:

Post a Comment