1

プログレスメニューバーを作成しようとしています(piccsy投資家のメニューバーと同様ですhttp://www.piccsy.com/investors/

ページの高さを測定し、%進行します。

それを行う方法について何かアイデアはありますか?

ありがとう、ニコラ。

4

2 に答える 2

10

ここに、この問題の解決策があります。

まず第一に、div:

<div id="bar"></div>​

今いくつかのスタイリング:

body{
    height:4000px;
}

#bar{
    position:fixed;
    background-color:red;
    width:100%;
    height:10px;
}​

そして最後にjQueryコード:

var bar = $('#bar'),
    $window = $(window),
    docHeight = $(document).height(),
    baseX = $window.height() / docHeight * 100;

bar.css('background', '-webkit-linear-gradient(left, red '+ baseX +'%, green '+ baseX +'%)');

$window.scroll(function(e) {      
    var x = $window.scrollTop() / docHeight * 100 + baseX;
    bar.css('background', '-webkit-linear-gradient(left, red '+ x +'%, green '+ x +'%)');
});

jsfiddleで実用的な例を見つけることができます。

私が使用したのは。だけなので、これはGoogleChromeでのみ機能することに注意してください-webkit-linear-gradient。すべてのブラウザで確実に機能するようにする場合は、特定のプロパティを追加する必要があります。そのための便利なPrefixrが見つかるかもしれません。

于 2012-06-29T01:38:59.017 に答える
9

.scroll()を使用して、jqueryを使用してスクロールイベントをキャプチャできます。

$(window).scroll(function() {...})

この関数内では、.scrollTop()関数を使用してスクロールの高さを取得できます。

var height = $(window).scrollTop()

高さを取得したら、プログレスバーを設定できます。

この関数を使用してページの高さを取得できます。

$(document).height();

プログレスバーの位置を設定するためのパーセンテージを計算できるようにします。

于 2012-06-25T19:58:53.860 に答える