Bug Navigation fixe sur IOS

Salut,

J'ai un menu en position fixed avec des ancres en navigation et un effet de scroll lors du clic de la souris. Sur Ipad à cause du menu fixe la navigation ne réagit plus au bout du second "click".

J'utilisais le plugin OnePageNav

J'ai contourné le problème en utilisant cette solution :

<script type="text/javascript">   
$('nav[role="navigation"]').onePageNav({
begin: function() {
//Hack so you can click other menu items after the initial click
$('body').append('<div id="device-dummy" style="height: 1px;"></div>');
},
end: function() {
$('#device-dummy').remove();
}
});
</script>

Ensuite pour des raisons de scroll plus doux sur tablettes et mobiles j'ai changé de plugin concernant le scroll auto et suis passé à celui-ci Smooth Scroll

Et sa solution pour IOS :

<script>
$(function(){
var $stupid = $('<div></div>')
.height(1)
.hide()
.appendTo('body');
var mobileHack = function() {
$stupid.show();
setTimeout(function() {
$stupid.hide();
}, 10);
};
// $('nav a').smoothScroll({
// afterScroll: mobileHack
// });
});
</script>

Et pour finir j'ai opté pour une solution vraiment légère mais je ne parviens pas à trouver la solution pour fixer le bug sur IOS, ça doit être un problème de variable dans mon code javascript que je ne maîtrise pas.


Voilà pour le nouveau scroll :

<script>
$(function(){
function getTargetTop(elem){
var id=elem.attr("href");
var offset=60;
return $(id).offset().top-offset;}
$('#navigation li a[href^="#"]').click(function(event){
var target=getTargetTop($(this));
$('html, body').animate({scrollTop:target},500);event.preventDefault();});
var sections=$('#navigation li a[href^="#"]');
function checkSectionSelected(scrolledTo){
var threshold=100;var i;for(i=0;i<sections.length;i++){var section=$(sections[i]);var target=getTargetTop(section);
if(scrolledTo>target-threshold&&scrolledTo<target+threshold){sections.removeClass("active");section.addClass("active");}};}
checkSectionSelected($(window).scrollTop());$(window).scroll(function(e){checkSectionSelected($(window).scrollTop())});});
</script>

Comment faire pour fixer le bug grâce aux solutions précédentes ?
Quoi mettre à la place de .onePageNav ou encore .smoothScroll ?

<script type="text/javascript">   
$('nav[role="navigation"]').onePageNav({
begin: function() {
//Hack so you can click other menu items after the initial click
$('body').append('<div id="device-dummy" style="height: 1px;"></div>');
},
end: function() {
$('#device-dummy').remove();
}
});
</script>

Merci pour votre aide ![/i]
Modifié par yank (27 Jul 2013 - 11:03)

J'ai trouvé une solution qui fonctionne plutôt bien à condition de ne l'appliquer que pour tablettes.

Comment faire pour réunir ces 2 scripts en 1 seul proprement ?

Merci !

// LE SCRIPT POUR SCROLL + LIENS ACTIFS

<script type="text/javascript">
$(function () {
    function getTargetTop(elem) {
        var id = elem.attr("href");
        var offset = 0 /*60*/ ;
        return $(id).offset().top - offset;
    }
    $('#navigation li a[href^="#"]').click(function (event) {
        var target = getTargetTop($(this));
        $('html, body').animate({
            scrollTop: target
        }, 500);
        event.preventDefault();
    });
    var sections = $('#navigation li a[href^="#"]');

    function checkSectionSelected(scrolledTo) {
        var threshold = 100;
        var i;
        for (i = 0; i < sections.length; i++) {
            var section = $(sections[i]);
            var target = getTargetTop(section);
            if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
                sections.removeClass("active");
                section.addClass("active");
            }
        };
    }
    checkSectionSelected($(window).scrollTop());
    $(window).scroll(function (e) {
        checkSectionSelected($(window).scrollTop())
    });
});


// LE SCRIPT POUR IOS + LIENS ACTIFS

<script type="text/javascript">
$('#navigation a').click(function () {
    // Find anchor position based on href
    var y = Math.floor($($(this).attr('href')).offset().top);
    // Add position fixed to nav
    fixIt();
    // Animate to anchor position
    $('html,body').animate({
        scrollTop: y
    }, 500, function () {
        // On animation complete add position absolute to nav
        // using the anchor position as top
        $('#navigation').css({
            position: 'absolute',
            top: y
        })
    })
    // Prevent default
    return false;
});
// Add position fixed on touch move 
$(document).bind('touchmove', fixIt);

function fixIt() {
    $('#navigation').css({
        position: 'fixed',
        top: 0
    })
}
</script>

[/i]