在iOS移动设备上查看时,页脚滚动内容

时间:2012-12-20 11:53:11

标签: jquery ios css footer sticky-footer

我有一个wordpress网站,它使用粘性页脚和一些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 */
}

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

0 个答案:

没有答案