Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    IE issue regarding pageYOffset & offsetTop

    I created a piece of code for a cross-brower/cross-device solution for locking a div on a custom vBulletin page. The div locks and scrolls along with the page scrolling as soon as it's reached.

    To do this, I make use of another div that is on the same height as the div that needs to lock and scroll along. Also, no fixed position is used because mobile behavior would make the div disappear completely. It's not the prettiest solution, but at least it seems the most potential as a cross-browser and device solution.

    However, when adding it, it works in all majors browsers and on platforms including iOS and Android, but it does not work in IE. For some mysterious reason, IE does not seem to be able to get the pageYOffset and/or offsetTop values.

    Code:
    <script type="text/javascript">
    window.onscroll = function (e) {
    var basediv = document.getElementById('basediv').offsetTop;
    var setdiv = document.getElementById('setdiv');
     if (window.pageYOffset < basediv) {
     setdiv.style.top = "0px";
     } 
     else {
     setdiv.style.top = window.pageYOffset - basediv + "px";
     }
    }
    </script>
    See the pageYOffset & div.offsetTop being called for onscroll link has been removed.

    Thanks in advance for the help!!
    Last edited by snakehill; 12-12-2012 at 12:30 PM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by snakehill View Post
    For some mysterious reason, IE does not seem to be able to get the pageYOffset and/or offsetTop values.
    The fact that your demo shows it as undefined should have hinted that it might be worth Googling the issue. Only IE9+ supports it.

    Code:
    Math.max(document.documentElement.scrollTop, document.body.scrollTop);

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    window.onscroll = function (e) {
    var basediv = document.getElementById('basediv').offsetTop;
    var setdiv = document.getElementById('setdiv');
    var top=getScroll()[1];
     if (top < basediv) {
     setdiv.style.top = "0px";
     }
     else {
     setdiv.style.top = top - basediv + "px");
     }
    }
    
    function getScroll(){
     if (window.innerHeight){
      return [window.pageXOffset,window.pageYOffset];
     }
     else if (document.documentElement.clientHeight){
      return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
     }
     return [document.body.scrollLeft,document.body.scrollTop];
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    The fact that your demo shows it as undefined should have hinted that it might be worth Googling the issue. Only IE9+ supports it.
    Unfortunately the page was tested in IE8, 9 and 10 and each of them called an undefined on the linked page.

    Also, scrollTop (both the javascript and its jquery varient) for some reason gave values that were terribly off. Really seems like something from vBulletin conflicting with it.

    But.. I ended up adding getBoundingClientRect for whichever browser and device supports that. Works like a charm and no conflicting with vBulletin so we're all good now.

    Thanks for the help though, Logic Ali and vwphillips.

    PS: I edited the main post but it disappeared (that new 'Moderated Threads and Posts' system is waaaay heavy). When it's approved again, could anyone mark this as resolved for me? Thanks!

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by snakehill View Post
    Unfortunately the page was tested in IE8, 9 and 10 and each of them called an undefined on the linked page.
    Try using a STRICT doctype.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •