javascript - position fixed issue -
hi have basic page setup prototype floating basket in pages right column.
what happens when basket hits top of page user scrolls applies class fixes position top of screen until user has once again scrolled top of screen.
this works fine apart 1 issue:
when resize browser window viewport smaller width of webpage , horizontal scroll right - if scroll down page basket fixes position overlaps right hand side of page!
code using below, apprreciate advice. in advance!
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>untitled document</title> <style type="text/css"> #container{width: 900px; margin-left:auto; margin-right:auto;} #header{height:40px; background-color:blue; } #column1{float:left; width:600px; background-color:green; height:900px;} #column2{float:left; width:300px; background-color:red; height:900px; position:relative;} #basket{background-color:white; margin-left:10px; margin-right:10px; width:280px;} .fixed{position:fixed; top:0;} /*#scrollwrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/ #scrollwrapper{overflow:hidden;} </style> <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script> <script type="text/javascript"> yui().use('node', function(y){ var basket = y.one('#basket'); var baskety = basket.gety(); var overflow = y.one('#scrollwrapper'); function constrain() { var basketheight = basket.getcomputedstyle("height").split("px")[0]; var windowheight = y.one("body").get("winheight"); if (basketheight > windowheight) { var diff = basketheight - windowheight; var scrollheight = y.one("#scrollwrapper").getcomputedstyle("height").split("px")[0]; var newheight = scrollheight - diff; overflow.setstyle("height", newheight+"px"); } } y.on('scroll', function(e){ var windowy = y.dom.docscrolly(); //if(windowy > baskety && !basket.hasclass("fixed")) if(windowy > baskety) { basket.addclass("fixed"); var height = y.one("body").get("winheight"); //basket.setstyle("height", height+"px"); constrain(); } else if(windowy < baskety && basket.hasclass("fixed")){ basket.removeclass("fixed"); alert("removing"); } }); }); /*window.onload = function(){ var basket = document.getelementbyid("basket"); alert(findpos(basket)); } function findpos(obj) { var curtop = 0; if(obj.offsetparent){ { curtop += obj.offsettop; } while (obj.offsetparent); } return curtop; }*/ </script> </head> <body> <div id="container"> <div id="header"> header </div> <div id="column1"> </div> <div id="column2"> <div id="basket" class=""> hkjhkjkjhkjhkj klklkl;kl;kl <p>jhjkhkjhkj</p> <div id="scrollwrapper"> <ul> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> </ul> </div> </div> </div> </div> </body> </html>
does trick you:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>untitled document</title> <style type="text/css"> #container{width: 900px; margin-left:auto; margin-right:auto;} #header{height:40px; background-color:blue; } #column1{float:left; width:600px; background-color:green; height:900px;} #column2{float:left; width:300px; background-color:red; height:900px; position:relative;} #basket{background-color:white; margin-top:10px; margin-left:10px; margin-right:10px; width:280px;} .fixed{position:fixed; top:0; left:0; width:100%} /*#scrollwrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/ #scrollwrapper{overflow:hidden;} </style> <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script> <script type="text/javascript"> yui().use('node', function(y){ var basket = y.one('#basket'); var baskety = basket.gety(); var basketcase = y.one('#basketcase'); var basketholder = y.one('#basketholder'); var overflow = y.one('#scrollwrapper'); function constrain() { var basketheight = basket.getcomputedstyle("height").split("px")[0]; var windowheight = y.one("body").get("winheight"); if (basketheight > windowheight) { var diff = basketheight - windowheight; var scrollheight = y.one("#scrollwrapper").getcomputedstyle("height").split("px")[0]; var newheight = scrollheight - diff; overflow.setstyle("height", newheight+"px"); } } y.on('scroll', fixbasket); y.on('resize', fixbasket); function fixbasket(e){ var windowy = y.dom.docscrolly(); //if(windowy > baskety && !basket.hasclass("fixed")) if(windowy > baskety) { basketcase.addclass("fixed"); basket.setstyle("marginleft", 610 - document.body.scrollleft + "px"); basketholder.setstyle("width", "900px"); var height = y.one("body").get("winheight"); //basket.setstyle("height", height+"px"); constrain(); } else if(windowy < baskety && basketcase.hasclass("fixed")){ basketcase.removeclass("fixed"); basket.setstyle("marginleft", "10px"); basketholder.setstyle("width", "auto"); //alert("removing"); } } }); /*window.onload = function(){ var basket = document.getelementbyid("basket"); alert(findpos(basket)); } function findpos(obj) { var curtop = 0; if(obj.offsetparent){ { curtop += obj.offsettop; } while (obj.offsetparent); } return curtop; }*/ </script> </head> <body style="margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;"> <div id="container"> <div id="header"> header </div> <div id="column1"> </div> <div id="column2"> <div id="basketcase"> <div id="basketholder" style="margin: auto;"> <div id="basket" class=""> hkjhkjkjhkjhkj klklkl;kl;kl <p>jhjkhkjhkj</p> <div id="scrollwrapper"> <ul> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> </ul> </div> </div> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment