1

モバイルでこれに問題が発生しました：

<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 のトリックなど、多くの解決策が見つかりました。

パフォーマンスの点でより良い解決策を教えてくれる人はいますか (ページに巨大なファイルを含めたくない)?

ありがとう。

実際に私はこのコードで試しています:

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

})();
4

1 に答える 1

2

私はすでにこの問題を抱えていました。あなたと同じように、多くのソリューションが私にとって良くないので、このテクニックを使用してユーザーにとって良いように見えます:

スクロールするとJavascriptで検出し、スクロールが止まるまでブロックを非表示にしてから再度表示します。

于 2013-04-28T11:09:28.973 に答える