2

私はここで見ることができるウェブサイトを構築しています：argit.bounde.co.uk

コンテンツの大部分を作成し、現在はナビゲーションに取り組もうとしています。3 つのナビゲーション バー (1 つだけが表示されます) があり、どちらが表示されていてもこのメソッドが機能する必要があります。ブラウザーのサイズを変更してウィンドウを狭くすると、1 秒が表示され、スクロールすると表示されるナビゲーションは 3 秒になります。

私はそれをファッションに合わせて動作させましたが、問題は、リンクをクリックすると、一時的に行きたい場所にジャンプし、戻って意図したとおりにスクロールすることです。これは、ナビに残した「href="#target」が原因です。「return false」を含めようとしましたが、ブラウザが JS をサポートしていない場合、ナビゲーションはまったく機能しません。

次の問題は、ターゲットを「オーバー」にする方法が欲しいということです。現在、リンクをクリックすると、選択したリンクまでスクロールし、ナビはどのリンクが「オーバー」しているかを更新します。ユーザーがページを上下にスクロールしているときにこれが必要ですが、リンクをクリックした場合、そのリンクを「上」(および他のナビゲーションからのそれぞれのリンク) にし、通常はスクロール チェックの影響を受けないようにします。それをオーバーライドします。

onClick ナビゲーションに使用しているソリューションは以下のとおりです。この種のことを行うプラグインがあることは知っていますが、jQuery をよりよく理解できるように自分で書きたいと思います。現在使用しているソリューションが適切かどうかはわかりません。そうでない場合は、アドバイスしてください。

function navigation() { 
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1500);
}

私が偶然見つけたスクロールチェックに使用しているソリューションは以下のとおりです。これは、上の方程式を上書きすることで機能し、実際には非常に簡単です。スクロール時のナビゲーションを修正するアクションもあります。

function navCheck() {

var documentHeight = $(document).height();
var windowHeight = $(window).height();
var windowTop = $(window).scrollTop() + 100;

var navTop = $("#scrollanchor").offset().top;
var mobileTop = $("#mobileanchor").offset().top;
var mobileHeight = $("#mobileanchor").height();

var overviewTop = $("#slider").offset().top;
var bioTop = $("#bio").offset().top;
var solutionsTop = $("#solutions").offset().top;
var experianceTop = $("#experiance").offset().top;
var contactTop = $("#contact").offset().top;

if($(window).scrollTop() > navTop) {
   $("#leftfixer").addClass("leftfix");
    } else {
       $("#leftfixer").removeClass("leftfix");
}

if($(window).width() < 1200){
    if(windowTop - 90 > mobileTop + mobileHeight) {
        $("#mobilefix").slideDown();
        } else {
            if(windowTop - 96 <= mobileTop) {
                $("#mobilefix").hide();
            }
        } 
    } else {
        $("#mobilefix").slideUp();
}

$("li").removeClass("over");
$("li.navoverview").addClass("over");


if(windowTop > bioTop) {
    $("li").removeClass("over");
    $("li.navbio").addClass("over");
}

if(windowTop > solutionsTop) {
    $("li").removeClass("over");
    $("li.navsolutions").addClass("over");
}

if(windowTop > experianceTop) {
    $("li").removeClass("over");
    $("li.navexperiance").addClass("over");
}

if(windowTop > contactTop || windowTop > documentHeight - windowHeight) {
    $("li").removeClass("over");
    $("li.navcontact").addClass("over");
}
}

初めての投稿なので情報漏れがありましたらすみません！私も同様の投稿を探しましたが、ほとんどの人はこの種のことを行うときにプラグインを使用しているようです. ありがとうございました

更新:アンカーにジャンプするページが修正されました

4

1 に答える 1

2

通常、JavaScript を使用してページをスクロールする場合はreturn false;、関数を呼び出した後に配置します。これにより、ページが一時的にアンカーまでスクロールするのを防ぎます。

何かのようなもの

function navigation() { 
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1500);
    return false;
}
于 2013-04-08T23:02:50.163 に答える