web-dev-qa-db-ja.com

アンカーポイントを超えてスクロールすると、navbarでCSSクラスを変更するにはどうすればよいですか？

Bootstrap 3を使用しており、ユーザーがページ上の大きなヘッダー画像をスクロールしたときに この効果 を達成したい。移動するにはnavbarの背景が必要私は彼らのコードを見て、それがjavascriptで行われていることを知り、さらには [〜＃〜] where [〜＃〜] 起こっていたと思います（IDを探してください）そのJSの「＃main-header」）...

高度なJavascriptは別として、特定のポイントを過ぎてスクロールするときにナビゲーションバーにこれを適用する方法を探しています。私のコードのクラスは「navbar」と呼ばれ、「＃main」を渡すと白になります。詳細な情報が必要な場合はお知らせください。誰か助けてくれたら感謝します！

javascriptcsstwitter-bootstrapnavigationtwitter-bootstrap-3
12
katgarcia

Twitterを使用している場合Bootstrapこれは 'Affix'で実現できます plugin

セットアップするのは非常に簡単です ドキュメントはこちら

12
Daimz

しようとしていることを達成する最も簡単な方法は、いくつかの単純なjavascript（この場合はjQueryを使用）とCSS3トランジションを組み合わせることです。

JSを使用して、すべてのスクロールイベントでウィンドウのスクロール位置を確認し、それを#main要素の下部の距離と比較します。スクロール位置が大きい場合は、本体にクラスを適用して示します#mainをスクロールして、CSSを使用してその「状態」のナビゲーションスタイルを定義します。

したがって、基本的なマークアップ：

<nav class="nav">
    <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

そして、javascript：

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    var stop = Math.round($(window).scrollTop());

    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }

});

そして、私たちのスタイル：

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

Codepen の実際の例

これは私がそれをやった方法です ここ 。また、いくつかのスクロール調整ともう少し複雑なスタイリングセマンティクスを採用していますが、これがその要点です。

36
taylorleejones

おそらくjavascript element.scrollTopとJquery addClassおよびremoveClass。しかし、自分で試したことはありません。

スクロールバーの位置を取得するためのオーバーフローリンクを次に示します。 Javascriptでスクロールバーの位置を取得する方法

1
user3047190