2

ナビゲーションバーであるdiv要素に到達したことを検出するスクリプトを作成し、cssを位置固定およびトップ0に変更して、トップに固定されるようにします。それができないという問題です。上にスクロールするように機能し、画面の最初にジャンプします。(ちらつきです)

Javascript

        var currentScrollTop = 0;
        var barMenuOriginalTopPos = $('#navigation').offset().top;
        console.log('original:' + barMenuOriginalTopPos);
        $(window).scroll(function() {

            currentScrollTop = $(window).scrollTop();
            console.log(currentScrollTop);
            if(currentScrollTop >= barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') == false){
                $('#navigation').addClass('fixElementToTop');
            }
            else if(currentScrollTop < barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') ){
                $('#navigation').removeClass('fixElementToTop');
            }
        });

CSS

.fixElementToTop { position: fixed; top:0; z-index:100;}

どうして

4

3 に答える 3

3

ここでは、jQuery プラグインによるちらつきのないソリューションを示します。

$(document).ready(function() {
    $('#fixedElement').scrollToFixed({ marginTop: 0 });
});

実際の例: http://bigspotteddog.github.com/ScrollToFixed/
プラグインのウェブサイト: https://github.com/bigspotteddog/ScrollToFixed/

于 2012-06-17T15:21:58.820 に答える
2

画面上部の CSS 固定バー

<div style="position:fixed;top:10px;left:10px">Nav bar</div>

レビュー：

申し訳ありませんが、最初の質問を理解できませんでした。フリックを避けるために、固定位置でオブジェクトを開始する必要があります。

<div style="height:120px">XXX</div>
<div id="navigation" style="position: fixed; top:120; z-index:100;">Navigation</div>
<div class="win" style="border: 1px solid; height: 900px;"></div>

コード：

$(window).scroll(function() {
    currentScrollTop = 120-$(window).scrollTop();
    console.log(currentScrollTop);
    if (currentScrollTop<0) currentScrollTop=0
    $("#navigation")[0].style.top=currentScrollTop+"px";
});​
于 2012-06-17T10:58:34.950 に答える
2

この行を設定します

var barMenuOriginalTopPos = $('#navigation').offset().top;

なので

var barMenuOriginalTopPos = $('#navigation').offset().top + 6;

ライブデモを参照

于 2012-06-17T10:58:38.417 に答える