0

ナビゲーション メニューが固定されているはずのサイトに取り組んでいるので、一緒にスクロールします。私が遭遇している唯一の問題は、デザイナーがナビゲーションをその位置から離れてページを下にスクロールし始めると、上部に太い黒い境界線が表示されるようにしたいということです。動き始めたらスタイルを追加する方法はありますか?

既存のコード:

<ul id="stickyNav">
<li class="technology"><a href="#technology">Technology</a></li>
      <li class="sales"><a href="#sales">Sales</a></li>
      <li class="operations"><a href="#operations">Operations</a></li>
      <li class="marketing"><a href="#marketing">Marketing</a></li>
      <li class="profitability"><a href="#profitability">Profitability</a></li>
</ul>

ul#stickyNav{background: url(../../../images/bb/stickynav-bg.jpg) repeat-x; height: 56px; position: fixed; width: 100%; z-index: 800;}
4

2 に答える 2

1

このフィドルをチェックして、実際の動作を確認できます。

実際のDOMを台無しにしないように、ナビゲーションを複製する必要があったことに注意してください。visibility: hiddenナビゲーションに多くの相互作用がある場合は、スクロールを開始するときに遊ぶことができます。

幸運を！

CSS

#body {
    position: relative;
    top: 0;
}
#content {
    height: 2000px;
}
.nav {
    width: 100%;
    background: black;
    color: white;
}

HTML

<div id="body">
    <h1>Stuff</h1>
    <div id="nav" class="nav">Scroll on the go!</div>
    <div id="content">Interestring things</div>
</div>

jQuery

$(function() {
    var $nav = $("#nav");
    $nav.get(0).originalY = $nav.offset().top;
});
$(document).scroll(function() {
    var $nav = $("#nav");
    var navDOM = $nav.get(0);
    var curY = $(document).scrollTop();

    // Check whether it started scrolling after the navbar
    if (curY > navDOM.originalY) {
        if ($('#nav_clone').length < 1) {
            // Note that you only have to clone the navigation once per scroll event
            $nav.clone()
                .attr('id', 'nav_clone')
                .addClass('nav')
                .css('position', 'fixed')
                .css('top', 0)
                .appendTo("#body");
        }
    }
    // Else, we remove the cloned navigation
    else {
        $('#nav_clone').remove();
    }
});

EDIT：適切なID#navと#nav_clone. .nav共通のスタイルを共有できます。

于 2013-03-29T20:36:41.027 に答える
0

私はblintのコードを試していなかったので、それもうまくいったかもしれませんが、他の誰かからより簡単な解決策が与えられました:

sticky = $('#stickyNav');
classtoAdd = 'nav_active';

$(window).scroll(function(){
/* Sticky Nav stuff */
var window_top = $(window).scrollTop();
if(window_top > 0){
sticky.addClass(classtoAdd);


}else{
sticky.removeClass(classtoAdd);

}
/* End Sticky Nav */


});

次に、CSS に新しいスタイルを #stickyNav.nav_active{} として追加しました。

于 2013-03-29T21:55:21.973 に答える