javascript - Header overlaps the sticky box when scroll -
i want have sidebar sticks on window when scroll stop scrolling when hits footer. have managed working level, it's small problem can't seem able solve.
test live here: http://meeped.co.uk:93/portfolio/ambition-world.html
everything fine until scroll, sidebar sticks top of page hidden behind fixed header well. how make not hidden behind header? , position right place? there anyway can animate bit smooth?
here html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>loai design studio</title> <meta name="description" content="loai design studio"/> <meta name="keywords" content=""> <meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../assets/css/reset.css"> <link rel="stylesheet" type="text/css" href="../assets/css/core.css"> <link rel="stylesheet" type="text/css" href="../assets/css/fixes.css"> <link rel="stylesheet" type="text/css" media="screen , (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/> <link rel="stylesheet" type="text/css" media="screen , (max-width : 770px)" href="../assets/css/tablets-portrait.css"/> <link rel="stylesheet" type="text/css" media="screen , (max-width : 500px)" href="../assets/css/phone.css"/> <link href='http://fonts.googleapis.com/css?family=open+sans:400,600' rel='stylesheet' type='text/css'> </head> <body> <!--header--><header> <div id="headerwrapper"> <div id="headercontent"> <div id="headerlogo"> <a href="../index.html"><img alt="loai design studio logo" src="../assets/elements/logo.png"/></a> </div> <nav><ul id="mainmenu" class="snapjs-expand-left"> <li><a href="../index.html">home</a></li> <li><a href="../portfolio.html">portfolio</a> <li><a href="../about.html">about me</a></li> <li><a href="../contact.html">contact me</a></li> <li><a href="../blog.html">blog</a></li> </ul></nav> </div> </div> </header> <!--website content--><div id="page"> <div id="secondheader"> <a class="secondheader-menubutton" href="#">menu</a> <p id="logo-smallscreen">loai design studio</p> </div> <div class="wrapperb"> <div id="portfolio-projectpage" class="content"> <div class="imagesgrid"> <p>logo</p> <img alt="ambition world logo design" src="images/ambition-world-logo-mockup.jpg"> <p>business card & mug mockup</p> <img alt="ambition world business card design" src="images/ambition-world-bussiness-card-mockup.jpg"> </div><div class="detailsbox"> <h3>ambition world general trading </h3> <p>this logo , business card designed dad's dubai based company.</p> <p><strong>skills:</strong> graphic design</p> <p><strong>date:</strong> 2013</p> <p class="sharebuttons"><strong>share project on:</strong> <a href="http://facebook.com/loai.design.studio" class="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeuricomponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;"><span>facebook</span></a> <a href="https://twitter.com/share" class="twitter" target="_blank"><span>twitter</span></a></p> <div> <a onclick="history.go(-1);">go back</a> <a href="#">next project</a> <a class="scrollup">go up</a> </div> </div> </div> </div> <!--footer section--><footer> <div id="footer-sectiona"> <div class="footercontent"> <h3><strong>want started?</strong></h3> <p>i offer free, no-obligation consultation, review project <br> & discuss ways achieve goals within budget & time frame.</p> <p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=ynv0dg9u&s=http%3a%2f%2fwww.loaidesign.co.uk%2f&v=1afd868e">schedule appointment now</a></p> </div> </div> <div id="footer-sectionb"> <div class="footercontent"> <p>copyright ©2012 loai design studio. <br> rights reserved.<a href="../terms-and-conditions.html">terms & conditions.</a></p> </div> </div> </footer> </div><!--the end of page--> <!--scripts links--> <script type="text/javascript" src="../assets/libraries/jquery.js"></script> <script type="text/javascript" src="../assets/js/slider.js"></script> <script type="text/javascript" src="../assets/js/main.js"></script> <script src="../assets/libraries/modernizr.js"></script> <!--gosquared scripts--> <script type="text/javascript"> var gosquared = {acct: "gsn-035800-k"}; (function(w){ function gs(){ w._gstc_lt = +new date; var d = document, g = d.createelement("script"); g.type = "text/javascript"; g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js"; var s = d.getelementsbytagname("script")[0]; s.parentnode.insertbefore(g, s); } w.addeventlistener ? w.addeventlistener("load", gs, false) : w.attachevent("onload", gs); })(window); </script> </body> </html> the css:
/*portoflio project page*/ #portfolio-projectpage{ text-align: left; position: relative; } .imagesgrid, .detailsbox { display: inline-block; vertical-align: top; } .imagesgrid { width: 65%; } .imagesgrid img{ border: 1px solid #e8e8e8; margin-bottom: 10px; } .imagesgrid p { border-top: 1px solid #e8e8e8; padding-top: 8px; margin: 10px 0; } .imagesgrid p:first-of-type { border-top: none; padding: 0 0 10px 0; margin: 0; } .detailsbox { width: 347px; position: fixed; margin-top: 28px; padding-left: 30px; } .detailsbox p { border-bottom: 1px solid #e8e8e8; padding-bottom: 10px; margin: 10px 0; } .detailsbox p, h3 { vertical-align: bottom; } .detailsbox { vertical-align: middle; } .detailsbox p:last-of-type { border-bottom: 3px solid #e8e8e8; margin: 0; } .detailsbox div { background-color: #f5f5f5; padding: 15px 0; text-align: center; border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; } .detailsbox div a{ background-color: #e8e8e8; padding: 10px 14px; cursor: pointer; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .detailsbox div a:hover{ color: #ffffff; background-color: #456087; } .detailsbox div br { display: none; } .sharebuttons { margin-left: 3px; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .sharebuttons span { display: none; } and javascript bit:
$(function() { $.fn.scrollbottom = function() { return $(document).height() - this.scrolltop() - this.height(); }; var $stickybox= $('.detailsbox'); var $window = $(window); $window.bind("scroll resize", function() { var gap = $window.height() - $stickybox.height() - 10; var visiblefoot = 255 - $window.scrollbottom(); var scrolltop = $window.scrolltop(); if(scrolltop < "auto" + 10){ $stickybox.css({ top: (200 - scrolltop) + "px", bottom: "auto" }); }else if (visiblefoot > gap) { $stickybox.css({ top: "auto", bottom: visiblefoot + "px" }); } else { $stickybox.css({ top: 0, bottom: "auto" }); } });
your if(scrolltop < "auto" + 10) return false "auto" + 10 string.
replace :
if(scrolltop < "auto" + 10){ $stickybox.css({ top: (200 - scrolltop) + "px", bottom: "auto" }); } by :
if(scrolltop < 80){ $stinkybox.css({ top: (130 - scrolltop) + "px", bottom: "auto" }); } i changed values desired behaviour.
also, in last condition, make top: 80 below header :
else { $stinkybox.css({ top: 80, bottom: "auto" }); } edit : enhanced code
var gap = $window.height() - $stinkybox.height() - 10; var visiblefoot = 255 - $window.scrollbottom(); var scrolltop = $window.scrolltop(); if(scrolltop < 50){ $stinkybox.css({ top: (130 - scrolltop) + "px", bottom: "auto" }); }else if (visiblefoot > gap - 100) { $stinkybox.css({ top: "auto", bottom: visiblefoot + "px" }); } else { $stinkybox.css({ top: 80, bottom: "auto" }); }
Comments
Post a Comment