Bootstrap固定頁腳移動

我正在開發與Angular JS，Bootstrap和Jquery的應用程序。我創建了一個固定頁腳，在整個應用程序中按預期工作。但是當我點擊移動瀏覽器上的輸入框時，頁腳移動到屏幕中心。Bootstrap固定頁腳移動

這裏是CSS：

.footer{ 
    bottom: 0; 
    padding: 10px 15px; 
    position: fixed; 
    width: 100%; 
}

我試圖改變頁腳屬性位置是：絕對並顯示：在輸入焦點沒有。這裏是它的代碼：

$(document).on('focus', '[type=text], [type=password], [type=number]', function (e) { 
    $(".footer").css("position","absolute"); 
    $(".footer").css("display","none"); 
}); 

$(document).on('blur', '[type=text], [type=password], [type=number]', function (e) { 
    $(".footer").css("position","fixed"); 
    $(".footer").css("display","block"); 
});

它適用於像iPhone 5的一些設備和5S，但對其他類似的iPad，iPhone 4沒有成功等任何幫助將非常感激。

來源

2014-03-12 Sanjay D

你可以添加你應用的點擊特定輸入框的jquery嗎？ – prady00

頁腳可能會移動，因爲當您關注輸入時，瀏覽器將調整視口大小以顯示軟鍵盤。調整大小的視口意味着'bottom'的新值比之前的值小。此外，不要忘記其他HTML5輸入類型，如「電子郵件」，「電話」等。:) – Palpatim

這是一些有趣的.resized視口，任何方式我可以處理這種變化？ –

我發現頁腳position: fixed往往不會像你想的那樣行事。我不知道你如何建立你的HTML，但你可以考慮使用position: absolute。

在下面的筆中，我做了一個當我需要頁面底部的固定頁腳時通常會做的小例子。

https://codepen.io/Rennie/pen/dvVGGJ

我不建議使用Javascript/jQuery來修復造型問題，特別是不JQuery的，因爲這不是「角辦法」。爲什麼參見"Thinking in AngularJS" if I have a jQuery background?。

來源

2017-03-15 15:11:27 Rennie

這爲我工作！ –

Bootstrap固定頁腳移動

回答

相關問題