4

編集:テキストの問題を解決しましたが、Firefox への移行については引き続きサポートが必要です。

ページを下にスクロールしたら、最小限のメニューを使用しようとしています。コードは移行しているという意味では機能しますが、希望どおりに移行していません。2 つの問題があります。

  1. Chrome では、他のすべてが移動した後にのみ、テキストが中央に「スライド」します。
  2. Firefox では、画像は遷移/フェードせず、単に右から「開く」だけです。

理想的な状況では、Chrome のように画像をアニメーション化する必要がありますが、Firefox のようにテキストを所定の位置にスライドさせたいと考えています。

Stackoverflow などで他の質問を調べましたが、Webkit と Moz の違いに対する解決策はないようです。

問題のjsFiddle。

これを試して：

$(document).on("scroll",function(){
        if($(document).scrollTop()>100){ 
            $(".logo").removeClass("logo_large").addClass("logo_small");
            $("header").removeClass("large").addClass("small");
            }
        else{
            $(".logo").removeClass("logo_small").addClass("logo_large");
            $("header").removeClass("small").addClass("large");
            }
        });
.small li, .large li, .logo_large, .logo_small {
    transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari and Chrome */
    -o-transition: all 1s; /* Opera */
}

nav {
    width: 960px;
    margin: 0 auto;
}

ul {
    display:inline-table;
    list-style-type: none;
    text-align: center;
}

li {
    display:table-cell;
    float: left;
    text-align: center;
    margin-right: 30px;
}

.large li {
    height: 120px;
    line-height: 120px;
}

.small li {
    height: 70px;
    line-height: 70px;
}

.logo_large {
    height: 130px;
    width: 164px;
    background:url(https://unsplash.it/200/300) no-repeat;
}

.logo_small {
    height: 80px;
    width: 50px;
    background:url(https://unsplash.it/200/300) no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header class="large">
    <nav>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li class="logo logo_large"></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

4

2 に答える 2

1

これらが 2 つの状態しかない場合は、永続クラスとオーバーレイ クラスを作成し、これらにスタイルを適用することで問題を回避できます。たとえば、次のようになります。

.logo { }
.logo.minimized { }

オーバーレイ スタイルを追加および削除するだけです。

これにより、jQuery が遷移を適切に計算できるようになります。

于 2013-04-09T23:33:10.477 に答える