jQuery移动固定工具栏在滚动时淡出

我试图在固定标题功能方面模仿下面的页面。

然而，随着jquerymobile的更新版本，我相信他们删除了scroll上的淡入/淡出功能

---

新的jquerymobile发行版有没有办法模仿这种行为？

如果您使用的是

data position=“fixed”

工具栏，那么您应该能够向标记添加一对

数据属性

，以允许“切换”工具栏：

<div data-role="footer" data-tap-toggle="true" data-transition="fade">
    ...
</div>

下面是一个演示：

在进行演示后，我意识到设置一个超时，以便

scrollstart

和

scrollstop

事件不会频繁触发是一个好主意：

var timer = null;

//when a user starts to scroll, hide the toolbar(s)
$(window).bind('scrollstart', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');
    }, 100);

//when a user stops a scroll, show the toolbar(s)
}).bind('scrollstop', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
    }, 100);
});​

---

如果您使用的是

data position=“fixed”

工具栏，那么您应该能够向标记添加一对

数据属性

，以允许“切换”工具栏：

<div data-role="footer" data-tap-toggle="true" data-transition="fade">
    ...
</div>

下面是一个演示：

在进行演示后，我意识到设置一个超时，以便

scrollstart

和

scrollstop

事件不会频繁触发是一个好主意：

var timer = null;

//when a user starts to scroll, hide the toolbar(s)
$(window).bind('scrollstart', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');
    }, 100);

//when a user stops a scroll, show the toolbar(s)
}).bind('scrollstop', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
    }, 100);
});​

---

是否要对工具栏使用此行为

然后还可以检查JQM 1.1，它包括一个指向多边形填充的链接，以使用固定工具栏行为的旧工具栏

这是回购协议

如果您想对其他一些元素（页眉/页脚，您喜欢的任何元素）使用该行为，我从polyfill中获取了一个函数，以便在show（）上重新定位，并将其如下使用：

// reposition before showing - based on JQM fixedtoolbar polyfill   
var $popPanel = YOUR_ELEMENT(S) to be repositioned
$popPanel.jqmData("fixed") == "top" ? 
    $popPanel.css( "top", $( window ).scrollTop() + "px" ) :
        $popPanel.css( "bottom", $wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );   

这将重新放置元素，您需要添加数据fixed=“top/bottom”

要在我使用的元素中转换，请执行以下操作：

// show $popPanel
$popPanel
    // add transition class - this is using slide
    .addClass('in')
    .show('fast')
// clean up
window.setTimeout( function() {
    $popPanel.removeClass('in');
    });

---

我喜欢JQM 1.0中的这一功能，但我认为polyfill甚至更好，因为我只需要这一个片段，而不需要完整的旧固定工具栏处理程序。

您想对工具栏使用这种行为吗

然后还可以检查JQM 1.1，它包括一个指向多边形填充的链接，以使用固定工具栏行为的旧工具栏

这是回购协议

如果您想对其他一些元素（页眉/页脚，您喜欢的任何元素）使用该行为，我从polyfill中获取了一个函数，以便在show（）上重新定位，并将其如下使用：

// reposition before showing - based on JQM fixedtoolbar polyfill   
var $popPanel = YOUR_ELEMENT(S) to be repositioned
$popPanel.jqmData("fixed") == "top" ? 
    $popPanel.css( "top", $( window ).scrollTop() + "px" ) :
        $popPanel.css( "bottom", $wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );   

这将重新放置元素，您需要添加数据fixed=“top/bottom”

要在我使用的元素中转换，请执行以下操作：

// show $popPanel
$popPanel
    // add transition class - this is using slide
    .addClass('in')
    .show('fast')
// clean up
window.setTimeout( function() {
    $popPanel.removeClass('in');
    });

---

我喜欢JQM 1.0中的这个功能，但我认为polyfill更好，因为我只需要这一个片段，而不需要完整的旧固定工具栏处理程序。

这个$（窗口）。绑定事件处理程序是否在“pageshow”、“pageinit”、“mobileinit”或document.ready函数中？它可以在全局范围内运行<代码>窗口总是可用的，所以请确保在jQuery核心加载后运行此代码。headloom.js如何？请参阅此$（window）.bind事件处理程序是否位于“pageshow”、“pageinit”、“mobileinit”或document.ready函数中？它可以在全局范围内运行<代码>窗口总是可用的，所以请确保在jQuery核心加载后运行此代码。headloom.js如何？看见