CODEWITHSUNDEEP
javascripthtmlcssmobilecss-position
Filippo oretti
Filippo oretti

Reputation: 49817

Css - Mobile posistion fixed , definitive solution

i got problem with this on mobile:

<div class="sticky">sticky to bottom</div>

.sticky{
position:fixed;
bottom:0;
right:0;
left:0;
width:100%;
}

on desktop it is clear good, on mobile (i only tested up on android, but i guess also on iOS), while scrolling the page, it doesn't remains sticked to the bottom of the window, but it scrolls up togheter with the document.

So, i searched trough stack and google, and found many solutions, iScroll.js, Scrollability, webkit tricks , and so on.

Is there anyone who can give me the better solution in terms of performance (i don't want to include huge files in my pages)?

Thanks.

Actually i'm trying with this code:

$(window).on('scrollstart',function(){
    $('.sticky').css('top','100%').fadeOut();
  });
  $(window).on('scrollstop',function(){
    $('.sticky').css('top','100%').fadeIn();
  });

(function(){

  var special = jQuery.event.special,
  uid1 = 'D' + (+new Date()),
  uid2 = 'D' + (+new Date() + 1);

  special.scrollstart = {
    setup: function() {

      var timer,
      handler =  function(evt) {

        var _self = this,
        _args = arguments;

        if (timer) {
          clearTimeout(timer);
        } else {
          evt.type = 'scrollstart';
          jQuery.event.handle.apply(_self, _args);
        }

        timer = setTimeout( function(){
          timer = null;
        }, special.scrollstop.latency);

      };

      jQuery(this).bind('scroll', handler).data(uid1, handler);

    },
    teardown: function(){
      jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
    }
  };

  special.scrollstop = {
    latency: 300,
    setup: function() {

      var timer,
      handler = function(evt) {

        var _self = this,
        _args = arguments;

        if (timer) {
          clearTimeout(timer);
        }

        timer = setTimeout( function(){

          timer = null;
          evt.type = 'scrollstop';
          jQuery.event.handle.apply(_self, _args);

        }, special.scrollstop.latency);

      };

      jQuery(this).bind('scroll', handler).data(uid2, handler);

    },
    teardown: function() {
      jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
    }
  };

})();

Upvotes: 1

Views: 144

Answers (1)

kach
kach

Reputation: 809

I already had this problem, just like you many solutions are not good for me then I use this technique to seem good for the user :

Detect with Javascript if you scroll and then hide the block until the scroll is stoped and show it again.

Upvotes: 2

Related Questions