コードをコピー


コードは次のとおりです:

　　　　 * {マージン: 0;パディング: 0;}
        本文 {font-size: 12px;line-height: 1.7;}
        li {リストスタイル: なし;}
        #content {幅: 800px;マージン: 0 自動;パディング: 20px;}
        #content h1 {color: #0088bb;}
        #content .item {パディング: 20px;margin-bottom: 20px;border: 1px 点線 #0088bb;}
        #content .item h2 {font-size: 16px;font-weight: 太字;border-bottom: 2px 実線 #0088bb;margin-bottom: 10px;}
        #content .item li {display: inline;margin-right: 10px;}
        #content .item li a img {幅: 230px;高さ: 230px;ボーダー: なし;}
        #menu{位置:固定;左:50%;マージン左:400ピクセル;上:100ピクセル;}
        #menu ul li a {
            表示: ブロック;
            マージン: 5px 0;
            フォントサイズ: 14px;
            フォントの太さ: 太字;
            色: #333;
            幅: 80px;
            高さ: 50px;
            行の高さ: 50px;
            テキスト装飾: なし;
            text-align: 中央;
        }
        #menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;}

$(function(){
$(window).scroll(function(){
varscrollTop = $(document).scrollTop();
var contentItems = $("#content").find(".item");
var currentItem = "";
contentItems.each(function(){
var contentItem = $(this);
var offsetTop = contentItem.offset().top;
if(scrollTop > offsetTop-200){//ここでの 200 は、特定の状況に応じて設定されます。値が減算されていない場合、div の端までスクロールしたときにメニューの選択状態が正しくなくなるためです。たとえば、ページが最初の div の一番下までスクロールしたとき、ページにはすでに 2 番目の div が表示されていますが、メニューの最初のオプションはまだ選択されています
CurrentItem = "#" contentItem.attr("id");
                                                                                                                                                                                     });
If(currentItem&¤tItem!=$("#menu").find(".current").attr("href")){
$("#menu").find(".current").removeClass("current");
$("#menu").find("[href=" currentItem "]").addClass("current");
}
});
});