Scroll One page ne s'adapte pas avec d'autres résolutions

Jaya
Javascript

Bonjour :)

J'ai un gros problème ou voir un petit (:P), j'ai fait un site "One Page" tout fonctionne juste que mon site ne s'adapte pas aux différents types de résolution, il y a toujours une espace :( ...

Je pense que avec les screenshots vous comprendrez mieux :)

Le code source :

$(document).ready(function(){
    $('#nav a').click(function(){
        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var id = $(this).attr('href');
        scrollTo(id);
        return false;
    });
    function scrollTo(target){
        if($(target).length>=1){
            height = $(target).offset().top; 
        }
        $('html,body').animate({scrollTop: height}, 1200);
        return false;
    }
});

Puis mon site : Portrait Chinois

Je vous remercie d'avance :)

2 réponses

Nairolf
Réponse acceptée

Alors il y a déjà un gros problème, c'est que tu as une div avec l'id #Contact, qui se trouve dans ta div #PortraitChinois, donc jQuery s'arrête à cette div (celle dans #PortraitChinois) au lieu d'aller vers celle qui est tout en bas.

Mais même tu aura un autre problème de taille (désolé du jeu de mot) c'est que ta div est trop petite, donc jQuery pourra pas scroller plus vu qu'il sera en bas de ta page, donc je te conseille de mettre un padding-bottom avec pour valeur 10% voir 12% pour que ça soit propre et s'adapte à un peu toute les résolutions.

Au fait j'ai vu aussi que si on scroll un peu, et qu'on actualise la page, ta barre de navigation n’apparaît pas, il faudrait faire une fonction qui se lance lorsque la page est chargé, pour placer correctement la barre de navigation, au lieu de devoir scoller un peu pour la voir apparaître

Jaya
Auteur

Oh un grand merci à toi :D

Oui j'ai remarqué ce problème mais j'ai pas trouvé de doc pour faire cette fonction... :/