jQuery implémente le menu de navigation flottant latéral effect_jquery

WBOY

Libérer： 2016-05-16 16:24:19

original

1777 Les gens l'ont consulté

Une page Web d'une seule page a beaucoup de contenu et la longueur de la page est grande. Elle doit être positionnée de manière pratique et rapide à différents endroits de la page, c'est pourquoi les menus flottants sont progressivement devenus populaires, comme indiqué ci-dessous pour les vêtements pour hommes. , vêtements pour femmes, beauté, etc.

Cette fonction de menu est divisée en deux parties :

1. Cliquez sur l'élément de menu et la page Web défilera jusqu'à la position correspondante. Cela peut être réalisé simplement via des points d'ancrage ;

2. Lors du défilement de la page, l'état sélectionné de l'élément de menu doit changer en conséquence. Cela nécessite de surveiller l'événement de défilement de la page Web et de le mettre en œuvre par un petit calcul ;

Calculez la relation de taille entre scrollTop et offsetTop de chaque div, déterminez où la page Web actuelle est affichée, puis ajoutez des styles aux éléments de menu correspondants en fonction des résultats calculés. Par exemple, le offset().top du deuxième div = 300, le offset().top du troisième div = 600 et le scrollTop à ce moment = 400, indiquant que la majeure partie de la position affichée est la position du deuxième div, et 700 est la troisième div. Voici un exemple simple :

Copier le code Le code est le suivant :

Achats en ligne

Copier le code

Le code est le suivant :

　　　　 * {marge : 0;remplissage : 0;}

        corps {taille de police : 12px; hauteur de ligne : 1,7 ;>

        li {list-style : aucun ;>

        #content {largeur : 800 px ; marge : 0 auto ; remplissage : 20 px ;>

        #content h1 {couleur : #0088bb;}

        #content .item {padding : 20px;margin-bottom: 20px;border: 1px pointillé #0088bb;}

        #content .item h2 {font-size : 16px;font-weight : bold;border-bottom : 2px solid #0088bb;margin-bottom : 10px;}

        #content .item li {affichage : en ligne ; marge-droite : 10 px;🎜>
        #content .item li a img {largeur : 230 px ; hauteur : 230 px ; bordure : aucune ;}

        #menu{position:fixed;left:50%;margin-left:400px;top:100px;}

        #menu ul li a {

            affichage : bloquer ;

            marge : 5px 0;

            taille de police : 14 px ;

            poids de la police : gras ;

            couleur : #333 ;

            largeur : 80px ;

            hauteur : 50px ;

            hauteur de ligne : 50 px ;

            décoration de texte : aucune ;

            text-align: center;

        >

        #menu ul li a:hover,#menu ul li a.current {couleur : #fff;fond : #0088bb;}

复制代码代码如下 :

　　$(fonction(){

               $(window).scroll(function(){

              var scrollTop = $(document).scrollTop();

              var contentItems = $("#content").find(".item");

            var currentItem = "";

contentItems.each(function(){

                    var contentItem = $(this);

                  var offsetTop = contentItem.offset().top;

if(scrollTop > offsetTop-200){//Le 200 ici est défini en fonction de la situation spécifique, car si une valeur n'est pas soustraite, l'état sélectionné du menu sera erroné lors du défilement jusqu'au bord d'un div, par exemple exemple, lorsque la page défile jusqu'au bas du premier div, la page a déjà affiché le deuxième div, mais la première option du menu est toujours sélectionnée 

CurrentItem = "#" contentItem.attr("id");

               });

If(currentItem&¤tItem!=$("#menu").find(".current").attr("href")){

$("#menu").find(".current").removeClass("current");

$("#menu").find("[href=" currentItem "]").addClass("current");

                }

            });

});