title: Scroll whole height of a div (banner)
body: <p>I'm trying to do a landing page, where will be a banner (<code>height: 100% - 200px</code>). And I want, that first scroll down (via mouse wheel / arrow etc.) will scroll down for whole height of banner (<code>100% of page - 200px</code>) and then scroll normally rest of a page.</p>
  
  <p>But when you will scroll back there and you will "step" (top of window will be on the bottom of an element) on banner, it will scroll whole height of banner back to top.</p>
  
  <p>I've tried a plugin fullPage.js, but I can't use it, cause it fights with other plugin that I'm using.</p>
  
  <p>Here is a <strong>jsfiddle</strong> with a basic simulation of my page: <a href="https://jsfiddle.net/Lua4v1p9/2/" rel="nofollow noreferrer">https://jsfiddle.net/Lua4v1p9/2/</a>
  basically, an element ".bann" has to be scrollable on one mouse wheel turn, if I'm describing it well enough.</p>
  
  <p>Here is work version of my page online: <a href="http://suju.honzisdesign.cz" rel="nofollow noreferrer">http://suju.honzisdesign.cz</a></p>
  
  <p>I hope, that I described my problem good enough, thanks for any response!</p>