1

モバイルブラウザにスティッキーヘッダーが必要です。私は現在このjqueryスクリプトを使用しています：

<script>
  $(function(){
    var stickyHeader = $('#persist-wrap').offset().top;
    $(window).scroll(function(){
      if( $(window).scrollTop() > stickyHeader ) {
        $('#persist-wrap').addClass("sticky");
      } else {
        $('#persist-wrap').removeClass("sticky");
      }
    });
  });
</script>

このCSSコードで：

.sticky {
  position: fixed;
  top: 0;
}

ヘッダーのIDはpersist-wrapです。これはデスクトップブラウザでは正常に機能しますが、モバイルブラウザではまったく機能しません。

何か案は？

4

1 に答える 1

1

私はあなたの例を少し微調整しました.ICSを実行しているSamsung Galaxy S2とiOS 6.01を実行しているiPad 3で動作します:(テストするために他に手渡すものはありません)。

変更点一覧

  • 複数回使用されたすべてのオブジェクトをキャッシュしました。
  • オブジェクトのパラメーターを受け入れる再利用可能な関数に変更して、複数回適用できるようにしました (一度に複数のオブジェクトを受け入れるように調整できます)。

次に例を示します。

$(function(){
  
	createSticky(jQuery("#header"));

});

function createSticky(sticky) {
	
	if (typeof sticky !== "undefined") {

		var	pos = sticky.offset().top,
				win = jQuery(window);
			
		win.on("scroll", function() {
    		win.scrollTop() >= pos ? sticky.addClass("fixed") : sticky.removeClass("fixed");      
		});			
	}
}
#header {
	background: #666;
	padding: 3px;
  padding: 10px 20px;
  color: #fff;
}
#header.fixed {
	position: fixed;
	top: 0;
	width: 100%;
}


/* For aesthetics only */
				
body {
	margin: 0;
    height: 10000px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some Text before the header</p>
<div id="header">
  Home
</div>

于 2012-11-09T11:41:17.243 に答える