Css - 移动位置固定，明确的解决方案

Question

我在移动设备上遇到了问题：

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

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

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

于是，我通过stack和google搜索，找到了很多解决方案，iScroll.js、Scrollability、webkit tricks等等。

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

谢谢。

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

$(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 检测，然后隐藏该块，直到滚动停止并再次显示。