プログレスメニューバーを作成しようとしています(piccsy投資家のメニューバーと同様ですhttp://www.piccsy.com/investors/)
ページの高さを測定し、%進行します。
それを行う方法について何かアイデアはありますか?
ありがとう、ニコラ。
プログレスメニューバーを作成しようとしています(piccsy投資家のメニューバーと同様ですhttp://www.piccsy.com/investors/)
ページの高さを測定し、%進行します。
それを行う方法について何かアイデアはありますか?
ありがとう、ニコラ。
ここに、この問題の解決策があります。
まず第一に、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が見つかるかもしれません。
.scroll()を使用して、jqueryを使用してスクロールイベントをキャプチャできます。
$(window).scroll(function() {...})
この関数内では、.scrollTop()関数を使用してスクロールの高さを取得できます。
var height = $(window).scrollTop()
高さを取得したら、プログレスバーを設定できます。
この関数を使用してページの高さを取得できます。
$(document).height();
プログレスバーの位置を設定するためのパーセンテージを計算できるようにします。