是否有可能得到固定头jQuery Mobile的,有一排得到的顶部设置为下面的链接?固定头jQuery Mobile的
http://www.expedia.com.au/p/promos/Beach-Breaks.htm
如果你看到标题图片上面的链接上升和头部来了,搞定了顶部。
之前向上滚动
向上滚动
我使用,我可以得到固定的头,但没有效果,如上面的链接试图iScroll后。有关于此事的链接或教程? 非常感谢您的时间和事先帮助。
是否有可能得到固定头jQuery Mobile的,有一排得到的顶部设置为下面的链接?固定头jQuery Mobile的
http://www.expedia.com.au/p/promos/Beach-Breaks.htm
如果你看到标题图片上面的链接上升和头部来了,搞定了顶部。
之前向上滚动
向上滚动
我使用,我可以得到固定的头,但没有效果,如上面的链接试图iScroll后。有关于此事的链接或教程? 非常感谢您的时间和事先帮助。
好了,你让我想知道我怎么能实现这个在jQuery Mobile的,因为它可以派上用场的一个项目,我的工作。
使用JQuery Waypoints,它可以检查时,某些元素命中页面的顶部,和哪个方向的页面在那一刻滚动。我已经设置了以下jsbin向您展示一个可能的解决方案:
http://jsbin.com/iyowog/3/edit
航点代码非常简单,只需在您的网站底部的脚本,你收身的标签之前。然后您可以用.waypoint()
初始化插件。在我的示例中,我使用了以下代码,当您向下滚动时修复了标题,并在您再次滚动回到原始点时解除修正。
$('#header').waypoint(function(event, direction) {
if (direction === 'down') {
$('#header').attr('data-position', 'fixed');
$('#header').addClass('ui-header-fixed');
} else {
$('#header').attr('data-position', '');
$('#header').removeClass('ui-header-fixed');
}
});
最好的部分是,它是动态的,不要紧,标题是页面内它就能当它击中页面顶部告诉。
你可以试试这个代码。此应该work.Please注意,我不是在手机测试了它browser.Let我知道是否有帮助。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).on("pageshow","#page",function(){
$(this).css("top","100px");
$(".ui-header-fixed").css("position","absolute");
})
$(window).scroll(function(event){
if($(window).scrollTop() >= 100){
$(".ui-header-fixed").css("position","fixed");
}
else{
$(".ui-header-fixed").css("position","absolute");
}
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div style="height:100px;background-color:#ccc"></div>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" style="height:1500px;">
<p>Lorem ipsum dolor</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
一个here演示 - http://jsfiddle.net/Xg86Z/
这会给你一个良好的开端 [如何让jQuery Mobile的页眉和页脚的固定] [1] [1]:http://stackoverflow.com/questions/4724068/如何对保jQuery的移动报头和页脚固定 – rahul 2012-08-14 04:54:03
@rahul:不,这是不同的。 – nhahtdh 2012-08-14 04:56:47
不幸的是,jQuery Mobile中没有任何东西可以让你实现上述功能。你可以有一个[固定头(http://jsbin.com/iyowog/1/)(***调整窗口大小,使页面滚动***),但没有一个中途开始了网页,然后会变成固定。 – Jeemusu 2012-08-14 05:06:10