javascript - Change Div Position from Absolute to Fixed with Horizontal Scroll -

i have site scrolls horizontally using horizontal scroll plugin on @ https://github.com/brandonaaron/jquery-mousewheel. no problems there.

my questions is, have 250px wide div 100% height starts 100px right side of screen. scroll (horizontally), div scrolls towards left , disappears off screen. div has position set absolute. div become fixed left hand side of screen once div hits left side of browser window.

i'm guessing need use js change css of div once reaches particular place (far left) on screen. i've seen quite few sites achieve vertical scrolling, menu bar becomes fixed @ top of screen once hits top. menu may have started half way down page , moved upwards on scroll. i'm wanting achieve same effect on horizontal plane.

i'm relatively new code in general, , brand new javascript. may biting off more can chew, challenge. help.

the css code changing is

#header {     width: 250px;     background: rgba(22,22,22,.85);     height: 100%;     position: absolute;     margin-left: calc(100% - 350px);     z-index: 999; } 

then change to

#header {     width: 250px;     background: rgba(22,22,22,.85);     height: 100%;     position: fixed;     margin-left: 0px;     z-index: 999; } 

this tried per understood question.. n yea have user javascript..

html:

<div id="headerslidecontainer">      <div id="headerslidecontent">          header content goes here!      </div>     <div id="new">         other contents     </div>  </div> 

css:

#headerslidecontainer {     position: absolute;      top:0px;     width: 100%;     height:1000px;     background: black; } #headerslidecontent {     width: 250px;     background-color:red;     height: 100%;     position: fixed;     margin-left: 0px;     z-index: 999; }  #new{     top:60px;     z-index:2;     height:100px;     background:orange;     position:absolute;     color: white;  } 

and js:

$(function() {      var bar = $('#headerslidecontainer');     var top = bar.css('top');     $(window).scroll(function() {          if($(this).scrollright() > 100) {             bar.stop().animate({'top' : '5px'}, 500);         } else {             bar.stop().animate({'top' : top}, 500);         }     }); }); 

change scrollright amount needed.. if scrollright doesnt work try scrollleft().. let me know if have prob..