jQuery melaksanakan menu navigasi terapung sampingan effect_jquery

WBOY

Lepaskan： 2016-05-16 16:24:19

asal

1774 orang telah melayarinya

Halaman web satu halaman mempunyai banyak kandungan dan panjang halamannya besar. Ia perlu diletakkan dengan mudah dan cepat di lokasi yang berbeza pada halaman, jadi menu terapung secara beransur-ansur menjadi popular, seperti yang ditunjukkan di bawah untuk pakaian lelaki. , pakaian wanita, kecantikan, dll.

Fungsi menu ini terbahagi kepada dua bahagian:

1. Klik pada item menu dan halaman web akan menatal ke kedudukan yang sepadan ini boleh dicapai hanya melalui mata utama;

2. Apabila menatal halaman, status item menu yang dipilih perlu diubah dengan sewajarnya. Ini memerlukan pemantauan acara menatal halaman web dan melaksanakannya dengan sedikit pengiraan

Kira perhubungan saiz antara scrollTop dan offsetTop setiap div, tentukan tempat halaman web semasa dipaparkan, dan kemudian tambah gaya pada item menu yang sepadan berdasarkan hasil yang dikira. Contohnya, offset().atas div kedua = 300, offset().atas div ketiga = 600 dan scrollTop = 400 pada masa ini, menunjukkan bahawa kebanyakan kedudukan yang dipaparkan ialah kedudukan div kedua, dan 700 ialah div ketiga. Berikut ialah contoh mudah:

Salin kod Kod adalah seperti berikut:

Membeli-belah Dalam Talian

Salin kod

Kod adalah seperti berikut:

　　　　 * {margin: 0; padding: 0;}

        badan {font-size: 12px;line-height: 1.7;}

        li {gaya senarai: tiada;}

        #content {width: 800px;margin: 0 auto;padding: 20px;}

        #content h1 {color: #0088bb;}

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

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

        #content .item li {display: inline;margin-right: 10px;}

        #content .item li a img {width: 230px;height: 230px;border: none;}

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

        #menu ul li a {

            paparan: blok;

            jidar: 5px 0;

            saiz fon: 14px;

            berat fon: tebal;

            warna: #333;

            lebar: 80px;

            ketinggian: 50px;

            ketinggian garis: 50px;

            hiasan teks: tiada;

            penjajaran teks: tengah;

        }

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

复制代码代码如下:

　　$(fungsi(){

               $(window).scroll(function(){

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

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

            var currentItem = "";

contentItems.each(function(){

                    var contentItem = $(this);

                  var offsetTop = contentItem.offset().top;

if(scrollTop > offsetTop-200){//The 200 di sini ditetapkan mengikut situasi tertentu, kerana jika nilai tidak ditolak, keadaan menu yang dipilih akan menjadi salah apabila menatal ke tepi div, untuk contoh, Apabila halaman hanya menatal ke bahagian bawah div pertama, halaman itu telah memaparkan div kedua, tetapi pilihan pertama dalam menu masih dipilih 

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

               });

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

$("#menu").cari(".semasa").removeClass("semasa");

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

                }

            });

});