修正头jQuery Mobile [英] Fixed Header jQuery Mobile

问题描述

是否有可能获得固定头文件jQuery Mobile，并在下面的链接中将行设置在顶部？

，可以检查某些元素何时触及页面顶部，以及此时页面滚动的方向。我已经设置了以下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'）; 
} 
}）; 
  

最好的部分是它是动态的，无论页眉位于页面内部能够分辨何时触及页面顶部。

Is it possible to get fixed headers jQuery Mobile, with a row getting set in the top as in the link below?

http://www.expedia.com.au/p/promos/Beach-Breaks.htm

If you see the link above the header image goes up and the header comes and getting fixed on the top.

Before scrolling up

After scrolling up

I’ve tried iScroll using that I can get the fixed header but not the effect as in the link above. Is there any link or tutorial on this matter? Thanks a lot for your time and help in advance.

解决方案

Ok, so you got me wondering about how I could implement this in jQuery Mobile as it could come in handy in a project I'm working on.

Using JQuery Waypoints, it's possible to check when certain elements hit the top of the page, and which direction the page was scrolling at that moment. I have set up the following jsbin to show you a possible solution:

http://jsbin.com/iyowog/3/edit

The waypoints code is very simple, just include the script in the bottom of your site before you close the body tag. You can then initialize the plugin with .waypoint() . I used the following code in my example, which fixes the header when your scrolling down, and unfixes it when you scroll back up past its original point again.

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

Best part is that it's dynamic, doesn't matter where the header is within the page it will be able to tell when it's hitting the top of the page.

这篇关于修正头jQuery Mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！