jQuery Mobile固定工具欄在滾動上淡出

我試圖根據固定標題功能來模仿以下頁面。 http://jquerymobile.com/demos/1.0.1/docs/toolbars/bars-fixed.html jQuery Mobile固定工具欄在滾動上淡出

但是，隨着jquerymobile的更新版本，我相信他們刪除了淡入淡出/滾動功能。

有沒有一種新的jquerymobile發佈模仿該行爲？

2012-04-26 cusejuice

如果您正在使用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

這將絲錐工作，滾動我相信你必須使用自己的事件處理程序：

這是演示：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); 
});

來源

2012-04-26 19:05:20 Jasper

此$（窗口）.bind事件處理程序是在'pageshow'，'pageinit'，'mobileinit'或document.ready函數中進行嗎？ – cusejuice 2012-04-26 19:19:11

它可以在全球範圍內運行。 'window'始終可用，所以只要確保在jQuery Core加載後運行此代碼即可。 – Jasper 2012-04-26 20:25:31

Headroom.js怎麼樣？見http://stackoverflow.com/questions/23880524/jquery-mobile-fixed-toolbars-with-headroom-js-disappear-reappear-on-scroll – 2014-05-27 03:17:32

你想用這個行爲的工具欄？

然後你也可以檢查JQM 1.1。 release notes，它包含一個到polyfill的鏈接，以使用舊的固定工具欄行爲。

這裏是preview URL和Github回購

如果你想使用一些其他元素的行爲（頁眉/頁腳任何你喜歡的元素），我參加了一個函數從填充工具以重新展出（）和我用這樣的：

// 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");

這將repositon元素，你需要添加數據固定=「頂部/底部」。

到過渡中的元素我使用：

// 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這一功能，但我認爲填充工具，甚至更好，因爲我只用這一個片段獲得通過與需要完整的舊固定工具欄處理程序。

來源

2012-04-26 21:34:55 frequent

jQuery Mobile固定工具欄在滾動上淡出

回答

相關問題