jQuery Mobile 固定工具栏在滚动时淡出答案

【问题标题】：jQuery Mobile Fixed Toolbar Fade Out on ScrolljQuery Mobile 固定工具栏在滚动时淡出
【发布时间】：2012-04-27 13:49:59
【问题描述】：

我试图在固定标题功能方面模仿以下页面。 http://jquerymobile.com/demos/1.0.1/docs/toolbars/bars-fixed.html

但是，随着 jquerymobile 的较新版本，我相信他们删除了滚动上的淡入/淡出功能。

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

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

如果您使用的是data-position="fixed" 工具栏，那么您应该可以在标签中添加一对data-attributes 以允许“切换”工具栏：

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

文档：http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

这适用于点击，滚动我相信你必须使用你自己的事件处理程序：

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

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

这是一个演示：http://jsfiddle.net/BCTpK/

在制作完演示后，我意识到设置超时以使 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);
});

【讨论】：

这个 $(window).bind 事件处理程序是否进入 'pageshow'、'pageinit'、'mobileinit' 或 document.ready 函数？
可以在全局范围内运行。 window 始终可用，因此只需确保在 jQuery Core 加载后运行此代码。
Headroom.js 怎么样？见stackoverflow.com/questions/23880524/…

【解决方案2】：

您想将此行为用于工具栏吗？

然后你也可以查看JQM 1.1。 release notes，它包含一个 polyfill 链接以使用旧的固定工具栏行为。

这里是 preview URL 和 Github 存储库

如果你想对其他一些元素使用该行为（页眉/页脚任何你喜欢的元素），我从 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" );

这将重新定位您需要添加的元素 data-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 更好，因为我只使用这个 sn-p 而不是需要完整的 old-fixed-toolbars 处理程序。

【讨论】：