Question

请看一下这个小提琴：http://fiddle.jshell.net/ikmac/q7gkx

使用此链接在浏览器中进行测试：http://fiddle.jshell.net/ikmac/q7gkx/show/

HTML：

<div class="nav">
    <a href="#test1">test1</a>
    <a href="#test2">test2</a>
    <a href="#test3">test3</a>
</div>

<div id="test1" class="test">test1</div>
<div id="test2" class="test">test2</div>
<div id="test3" class="test">test3</div>

CSS：

.nav {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: #000;
}

.nav a {
    float: left;
    font-size: 20px;
    color: #fff;
}

#test1 {
    margin-top: 1000px;
    height: 1000px;
    background: red;
}

#test2 {
    height: 1000px;
    background: blue;
}

#test3 {
    height: 1000px;
    background: green;
}

这是在iOS 5.0上的Safari中发生的事情（4.3不支持固定位置）：

第一次点击其中一个锚时，页面会跳转到正确的锚点。之后我再也无法点击其他链接了。当我向上或向下滚动一点时，链接再次变为可点击。

所有其他桌面浏览器都表现良好。

有没有人曾经遇到过这个问题或者知道如何修复它？

Answer 1

我也有这个问题。当点击导航锚点时，让javascript进行导航滚动，我有一半解决了它。并且因为正常的触摸滚动直到手指离开屏幕才会发出事件，我使用position：fixed来使触摸滚动比javascript更好，请参阅apples dev-site。

这不是最终解决方案，但在我看来，最好不要工作。此脚本还会检查窗口的宽度，以确保它仅将其应用于较小的屏幕，即设备。

以下是我的代码，如果您发现它有用，请将其更好或找到更好的解决方案，请分享：）

/* NAV POSITION */

var specScroll = false; // If special scrolling is needed

/* Check what kind of position to use.*/
(function navPos() {
    var width = checkWidth();

    if (width <= 480 || navigator.userAgent.match(/iPad/i) != null) {
        specScroll = true;
    }else{
        specScroll = false;
        window.onscroll = NaN;
    }
})();

$(window).resize( function(){ navPos(); } ); // After resizing, check what to use again.


/* When clicking one of the nav anchors */
$(function() {
    $('a').bind('click',function(e){
        var $anchor = $(this);

        if(specScroll){
            $('#nav').css('position', "absolute");
            window.onscroll = anchorScroll;
        }
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 700,'easeOutExpo', function(){
            if(specScroll){setTimeout("window.onscroll = touchScroll;", 100);} 
            // the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling.
        });

        e.preventDefault();
    });
});

/* While the user clicks and anchors in nav */
function anchorScroll() { $('#nav').css('top', window.pageYOffset); }

/* the first time the user scrolls by touch and lift the finger from screen */
function touchScroll() { 
    $('#nav').css('position', 'fixed');
    $('#nav').css('top', 0);
    window.onscroll = NaN;
}

/* CHECK WIDTH OF WINDOW */
function checkWidth() {
    myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth;    //Non-IE
    } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
        myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
    } else if( document.body && ( document.body.clientWidth ) ) {
        myWidth = document.body.clientWidth;    //IE 4 compatible
    }
    return myWidth;
}

我在项目页面上使用此解决方案，尝试一下：dare.niklasek.se

Answer 2

我使用固定位置导航遇到了同样的问题，该导航使用jQuery动画在页面上滚动用户。我发现即使固定位置元素在新位置可见，用js检查它也会报告它仍然回到原始位置，直到用户手动移动屏幕。在此之前，即使导航在视觉上存在，也无法触及导航以与其进行交互。更多信息和演示：http://bit.ly/ios5fixedBug

iOS Safari：固定定位元素中的锚点只能工作一次

2 个答案: