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 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Javascript scrollTop function issue

    I have small code which uses jQuery and javascript. Its intention is that, in mobile view when person scrolls down page a small logo will appear at top which will be fixed at top fixed navigation bar. And when when person again scrolls back to top of the page, this small logo will disappear. I have used below code. It works fine in firefox but not in chrome and iphone.
    Kindly help.

    $(".smalllogo").hide();
    $(document).scroll(function(){
    $(".smalllogo").fadeIn();
    });

    // code for logo fadeout when page back to top
    window.onscroll = function(ev)
    {
    var B= document.body; //IE 'quirks'
    var D= document.documentElement; //IE with doctype
    D= (D.clientHeight)? D: B;

    if (D.scrollTop == 0)
    {
    $(".smalllogo").stop().fadeOut(200);
    }
    };

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,379
    Thanks
    11
    Thanked 592 Times in 572 Posts
    it's usually body that scrolls, not html.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,727
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Why do you make it so complicated? You can just use the first jQuery scroll function for both, fade in and out with a simple if/else query.

    Code:
    $(window).scroll(function() {
      if($(this).scrollTop() === 0) {
        $(".smalllogo").fadeOut();
      }
      else {
        $(".smalllogo").fadeIn();
      }
    });

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Won't that call fadeIn on every scroll event, regardless of whether it's needed?

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,379
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by Logic Ali View Post
    Won't that call fadeIn on every scroll event, regardless of whether it's needed?
    and scroll fires a lot. certain smoothscrolling mouse drivers and browser/os settings can cause scroll to fire hundreds of times per second. calling a fade or even accessing a jquery selector will reduce the scroll performance of the page due to cpu flooring.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,727
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Yeah, that’s true, it was just a simplified example. Of course you could also do a check whether or not the element is visible and only fire fade in/out based on that condition. You do have to check that on every scroll event, though, otherwise it’s not possible. I’ve done something like that a while ago (a little more intricate with window sizing) on http://droemer-knaur.de


  •  

    Posting Permissions

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