0

メイン ナビゲーションのアクティブな状態だけでなく、スムーズなスクロールも処理するスクリプトに問題があります。プラグイン: http://tinyurl.com/amz4kob

ナビゲーション バーは固定されているため、事実上高さがありません。

克服できないように見える2つの問題があります。

  1. ページの読み込み時に、アクティブな状態が連絡先リンクに適用されます。1px 下にスクロールすると、アクティブな状態がホーム リンクに正しく適用されます。
  2. 特定のIDを持つ要素内のアンカーに注意を払うようにスクリプトを変更する方法を一生理解できませんか? つまり、このスクリプトでアクティブ状態をタグ内の要素に適用するだけです。

どんな助けでも大歓迎です。

@rrfive

ここでの生活を楽にするために、コメント付きのスクリプトがあります。

$(document).ready(function() {
//Get Sections top position
function getTargetTop(elem){

    //gets the id of the section header
    //from the navigation's href e.g. ("#html")
    var id = elem.attr("href");

    //Height of the navigation
    var offset = 0;

    //Gets the distance from the top and subtracts the height of the nav.
    return $(id).offset().top - offset;
}

//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {

    //gets the distance from the top of the section refenced in the href.
    var target = getTargetTop($(this));

    //scrolls to that section.
    $('html, body').animate({scrollTop:target}, 500);

    //prevent the browser from jumping down to section.
    event.preventDefault();
});

//Pulling sections from main nav.
var sections = $('a[href^="#"]');

// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){
    //How close the top has to be to the section.
    var threshold = 54;

    var i;

    for (i = 0; i < sections.length; i++) {

        //get next nav item
        var section = $(sections[i]);

        //get the distance from top
        var target = getTargetTop(section);

        //Check if section is at the top of the page.
        if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
            sections.removeClass("active");
            section.addClass("active");
        }
    };
}

//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());

$(window).scroll(function(e){
    checkSectionSelected($(window).scrollTop())
});

});

4

1 に答える 1

0

<div class="section"></div>使用しているプラ​​グインはページ上の要素の位置をチェックしますが、それらを作成したためdisplay:none;、すべてのセクションがページの上部から「0 ピクセル」を返し、「CONTACT」セクションが最後であるためです。ページ上で、そこで止まっています。

したがって、 CSS でdisplay:none;from.sectionを削除するだけで問題なく動作します。

.section {
    /*display: none; <-- Comment this line out. */
    height: 100%;
    min-width: 990px;
}
于 2012-11-11T04:48:29.740 に答える