我有一个 wordpress 网站,它使用粘性页脚和一些 jquery 来隐藏和显示微小的导航栏。
当您在 iphone 上查看网站http://iqonline.eu时,当您滚动页脚时,会跟随页面上的内容,然后跳回底部。有谁知道如何解决此问题,使其保留在页面底部?适用于所有浏览器和 Android 设备,仅适用于 iOS。
用于隐藏和显示各种元素的 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 */
}
如果有人需要更多代码,请大喊。