僅當在iOS中滾動時才顯示導航欄

當用戶向上滾動時，我正在使用Marius Craciunoiu technique來顯示我的整個導航欄。僅當在iOS中滾動時才顯示導航欄

所以，這是我的的JavaScript（使用jQuery）代碼：

var delta, didScroll, lastScrollTop, navbarHeight; 

delta = 5; 
lastScrollTop = 0; 
navbarHeight = $('.navbar').outerHeight(); 

$(window).on('scroll touchmove', function() { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
    hasScrolled(); 
    didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var scrollTop = $(this).scrollTop(); 

    if (Math.abs(lastScrollTop - scrollTop) <= delta) { return; } 

    if (scrollTop > lastScrollTop && scrollTop > navbarHeight) { 
    $('.navbar').addClass('scrolling'); 
    } else { 
    if (scrollTop + $(window).height() < $(document).height()) { 
     $('.navbar').removeClass('scrolling'); 
    } 
    } 

    lastScrollTop = scrollTop; 
}

把它更容易，我發表我的http://jsfiddle.net/caio/7HrK7/代碼。如果您想在iOS中進行測試，請使用http://fiddle.jshell.net/caio/7HrK7/show/light/網址。

視頻：http://hiperload.com/s/ua5k53n0x/d.mp4?inline

如何，你可以看到，我的代碼適用於臺式機和Android手機。但是在iOS上它需要一個觸摸事件來響應，而滾動事件仍然發生，否則它只會在最後執行。我試圖添加touchmove事件，但沒有成功。你可以幫我嗎？

來源

2014-05-04 Caio Tarifa

它看起來像iOS在滾動時暫停所有計時器。也許你還會有一些運氣在這裏嘗試的技術：

iOS 6 js events function not called if has setTimeout in it

或者，您也可以在touchmove直接運行hasScrolled()。這似乎導致一些閃爍（至少在我的iPad），所以你可能要找出一種不同的方式來製作動畫滾動條：

$(window).on('touchmove', function() { 
    hasScrolled(); 
});

在這裏看到一個小提琴： http://jsfiddle.net/mariusc23/7HrK7/13/

讓我知道如果你找到一個解決方案，以便我可以更新這篇文章。我也會花一些時間。謝謝閱讀。 :)

來源

2014-05-05 14:29:19

僅當在iOS中滾動時才顯示導航欄

回答

相關問題