1

我有一个 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 */
}

如果有人需要更多代码,请大喊。

4

0 回答 0