スティッキーフッターとjqueryを使用して小さなナビゲーションバーを非表示および表示するワードプレスサイトがあります。
iPhone でサイトhttp://iqonline.euを表示すると、スクロールすると、フッターがページのコンテンツをたどってから、一番下に戻ります。ページの下部に残るようにこれを修正する方法を知っている人はいますか? iOS のみのすべてのブラウザーと Android デバイスで問題なく動作します。
さまざまな要素を非表示および表示する jQuery コード。
//showing and hiding the whole footer
$(document).ready(function() {
$("#clickme").click(function(event) {
event.preventDefault()
$("#footer").fadeToggle(300);
$('#menu, #menu2, #menu3, #menu4, #tiny_menu').hide(300);
$(this).html(($('#clickme').text() == 'Show') ? 'Hide' : 'Show');
$(this).toggleClass("active");
$(this).attr("title", ($(this).hasClass("active")?"Show":"Hide") + " the menu");
});
});
//toggle the tiny menu to show menu items
jQuery(document).ready(function() {
jQuery("#tiny_menu").hide();
jQuery("#menu-button").click(function(event)
{
event.preventDefault()
jQuery(this).next("#tiny_menu").slideToggle(300);
});
});
小さなメニューCSS
.tiny_menu_bar {
display:none;
width:524px;
position: fixed!important;
bottom: 0px!important;
z-index: 2;
height: 30px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
誰かがさらにコードを必要とする場合は、叫んでください。