jquery - 移动浏览器上的 header

我需要在移动浏览器上粘贴标头。我当前正在使用此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。这在台式机浏览器上可以正常运行，但在移动浏览器上则完全不能运行。

有任何想法吗？

最佳答案

我对您的示例进行了一些调整，它可以在运行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>

关于jquery - 移动浏览器上的 header ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12573532/