3

divの下部にoverflow：autoに設定されている[上にスクロール]ボタンを追加しようとしています。これは、ajaxを使用して（さまざまな長さの）コンテンツをdivに呼び出すサイトのセクションに使用されます。

私が望む機能：ユーザーがdiv内をスクロールすると、ボタンがフェードインして表示されます（このチュートリアルのように：http：//www.mattvarone.com/web-design/uitotop-jquery-plugin/）。このフェードイン機能を提供する優れたチュートリアルを見つけましたが、個々のスクロールdivではなく、ページ全体の長さに関連しているだけです。これは私が問題を抱えているところです。

スクロールするdiv内に静止ボタンを作成することができました。私はコーディングに非常に慣れておらず、ユーザーがdiv内をスクロールしたときにトリガーされるフェードイン効果を作成する方法を理解できませんでした。ここで私のサンプルの試みを参照してください：http：//jsfiddle.net/in_excess/eEHbW/5/

誰かが助けを提供することができればそれは大いにありがたいです。私が説明していることを実行するサイト/チュートリアルへのリンクですら。私はこれを何日もグーグルしていて、必要なものを見つけることができません。ありがとう！

4

2 に答える 2

1

divのスクロール可能な領域に基づいて不透明度を計算する必要があります。

$('#content').scroll(function() {
    var total = $(this)[0].scrollHeight - $(this).height();
    var opacity = $(this).scrollTop() / total;
    $('#backtotop').css('opacity', opacity);
});

上からさらにスクロールすると、スクロールバックボタンが不透明になります。

更新されたフィドルは次のとおりです：http：//jsfiddle.net/adrianonantua/eEHbW/9/

于 2012-09-26T20:36:45.933 に答える
0

アロハ。javascriptを使用して、divのような要素のサイズ/高さを取得できます。

var divSize = document.getElementById('myDiv').style.height;

次に、この情報を使用して、ボタンの作成に使用しているdivの不透明度/フィルターを調整できます。

var opacity = divSize / 10; //or whatever method you want to use to determine opacity
var button = document.getElementById('scrollToTopButton');
button.style.opacity = opacity;
button.style.filter = "alpha(opacity="+ opacity +")";
于 2012-09-26T20:22:48.720 に答える