0

5 つのページ (セクション) に分割された単一ページの Web サイトがあり、各セクションが画面いっぱいに表示され、ユーザーがナビゲーションをクリックすると、そのセクションまでスムーズにスクロールします。

そのページが選択されたら、上部ナビゲーションのアンカー要素に下線を引く方法がわかりません。ユーザーがどのページにいるのかをユーザーに警告したいだけで、ユーザーがスクロールバーを使用してそのセクションに移動した場合でも、変更する必要があります。

ページの各セクションには、ナビゲーションからリンクされた ID があります。各セクションが独自のページである場合はこれを行う方法を知っていますが、単一ページのサイトの場合はわかりません.

これを行うjqueryプラグインまたは純粋なCSSの方法はありますか?

4

1 に答える 1

0

jQueryは、そのための最善の策です。これにより、ユーザーがページをスクロールすると nav 要素が自動的に変更されます。これは、各セクションの高さが同じ場合に最適ですが、複数のセクションの高さで動作するように少し変更できます。サイトに正確に収まるように、少し変更が必要になる場合があります。

//activates every time user scrolls
$(window).scroll(function () {

    //gets the current scroll height
    scroll = $(document).scrollTop()

    //gets section height -- this is where the editing will have to be done if
    //each section is a different height
    H = $('.section_class_name').height()

    //get the number of sections down
    place = (scroll) / H;
    place = Math.floor(place) - 1;

    if($(document).scrollTop() >= H) {
        //all other nav items have no background
        $('#menu_ul li').css('background', '');

        //the corresponding nav element has this background
        $('#menu_ul li').eq(place).css({'background':'#505080','border-radius':'9px'});
    }
})
于 2012-12-18T20:38:45.220 に答える