title: Change the fixed position when browser is re-sized to a specific height
body: <p>I currently use the <code>fixed position</code> for my div which set it to stay at the bottom of the page. However, I meet an issue when re-sizing my browser to the minimum height which that div goes over my left navigation.</p>
  
  <p>So what I want to do is that whenever the user re-sizes the browser window to somewhat lower than the height of my <code>left navigation</code> the position fixed is <code>removed</code> or <code>changed</code> so that it does not go <code>overlap my left navigation</code> and browser will generate the scroll to the bottom of the page where that div stays.</p>
  
  <p>So how could I fix this?</p>