Css - 移动定位固定，最终解决方案

Question

我在移动上遇到了的问题：

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

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

在桌面上它显然很好，在移动设备上（我只在Android上测试过，但我猜也在iOS上），在滚动页面时，它不会一直粘在窗口的底部，而是向上滚动与文件有关。

所以，我搜索了堆栈和谷歌，发现了许多解决方案，iScroll.js，Scrollability，webkit技巧等等。

有没有人可以在性能方面给我更好的解决方案（我不想在我的页面中包含大量文件）？

感谢。

其实我正在尝试使用此代码：

$(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) );
    }
  };

})();

Answer 1

我已经遇到过这个问题，就像你的许多解决方案对我不好，然后我使用这种技术对用户来说似乎不错：

如果滚动然后隐藏块直到滚动停止并再次显示，则使用Javascript检测。