1

サイトのナビゲーションが Safari または Chrome で機能しないことに気付きました (Firefox では正常に機能します)。どちらのブラウザでも表示されますが、クリックは無効になっています。何が原因で、どうすれば修復できますか?

明確にするための予定: *Chrome では、メニューが読み込まれ、クリックできますが、ページはセクションまでスクロールしません。また、手動でスクロールしてもメニューが続きません。また、ディスクは左側に表示されません。Safari では、ディスクと同じようにメニューが表示されますが、フォロー アロング スクロールと同様に、クリックは完全に無効になっています。

また、これらの問題を私の注意を引いたのは別の人だったので、これは私のマシンに限定されたものではないと確信しています（つまり、この問題は2人の異なるユーザーによって2つの異なるマシンで示されています*

ライブサイト

html

<nav>
    <ul id="Nav">
        <li><a href="#home">home</a></li>
        <li><a href="#about">manifesta</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#lookbook">lookbook</a></li>
        <li><a href="#contact">contact</a></li>
        <li><a href="#optin">goodies</a></li>
        <li><a href="http://frshstudio.com/blog">blog</a></li>
    </ul>
</nav>

CSS

nav {
    position: fixed;
    right: 9%;
    top: 55%
}

nav ul { 

        list-style-type:disc;
    }

    nav ul li {
        text-align: right;
        color: #fff;
    }

    nav ul li.current {
        color:#000;
    }
4

3 に答える 3

1

これは、クロスブラウザーで動作するデモhttp://jsfiddle.net/yeyene/KBF7N/です。

スクロール ナビゲーションに他のプラグインを使用する必要はありません。これらの小さなスクリプトだけで、必要な効果が得られます。

の代わりにアニメーション化する同じ DIV id 名を持つタグにtarget属性を追加します。<a>href

HTML

<nav>
    <ul id="Nav">
        <li><a target="home">home</a></li>
        <li><a target="about">manifesta</a></li>
        <li><a target="services">services</a></li>
        <li><a target="lookbook">lookbook</a></li>
        <li><a target="contact">contact</a></li>
    </ul>
</nav>

<div id="home">home</div>
<div id="about">manifesta</div>
<div id="services">services</div>
<div id="lookbook">lookbook</div>
<div id="contact">contact</div>

Jクエリ

$(document).ready(function(){
    $('#Nav li a').on('click',function(){
        $("#Nav li").removeClass('current');
        $(this).parent('li').addClass('current');
        $('html, body').animate({ scrollTop: $('#'+$(this).attr('target')).offset().top }, 'slow'); 
    });
});

CSS

body {
    background:#ccc;
    margin: 0;
    height: 2000px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
nav {
    position: fixed;
    right: 9%;
    top: 55%
}
nav ul { 
        list-style-type:disc;
    }
    nav ul li {
        text-align: right;
        color: #fff;
        cursor:pointer;
    }
    nav ul li a{
        color: #000;
    }
    nav ul li.current {
        color:#000;
    }
#home, #about, #services, #lookbook, #contact{
    float:left;
    width:94%;
    height:600px;
    margin:20px 3%;
    background:#ccc;
    text-align:center;
    font-size:100px;
    border:3px solid #555;      
}
于 2013-06-24T08:19:13.720 に答える
1

これが起こっている正確な理由を見つけることができませんでしたが、Webkit ブラウザー (つまり、Chrome と Safari) は、リッチ ページでアニメーション アーティファクトが発生することで有名です。スライドショー、スムーズ スクロール、ピンタレスト、Google API 用のファイル、およびテーマ サポート用のファイルがいくつか含まれているのを確認しました。ブラウザはこれらの管理に忙殺され、css の動作をシームレスにできていないと思います。

すでにjqueryを使用しているため、ナビゲーションを作成する代わりに、position: fixed;絶対に配置し、jqueryを使用してその位置をアニメーション化することをお勧めします-スクロール位置に基づいて明示的なピクセル距離を維持right: 9%;して作成します。top:これにはすでに 100 万個のプラグインがあるので、苦労せずに自分に合ったプラグインを見つけることができると確信しています。ここから始めてください: http://www.jquery4u.com/menus/floating-message-plugins/ .

于 2013-06-21T14:04:31.107 に答える