1

訪問者がウェブサイトを下にスクロールすると下に移動するスクロール サイドバー div があります。問題は、下までスクロールしないことです。その理由がわかりました。

コードが読み込まれるとすぐにスクリプトがドキュメントの高さを計算すると仮定しますが、ウェブサイトには、計算が完了するとまだ読み込まれていないさまざまなサイズの画像があり、メインの画像も別の画像に変更するサムネイルも含まれます。クリックしたサイズ。

各画像の高さを設定すると、正しくスクロールされますが、実際の Web サイトで動的に生成される画像サイズを知ることはできません。

すべての画像が読み込まれた後、スクリプトがドキュメントの高さを計算する方法はありますか? それともうまくいく何か他のもの？

コードは次のとおりです。

var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $("#maincontainer").height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 0);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
4

2 に答える 2

1

$('body').height()body高さはビューポートのサイズに依存するため、機能しません。

また、document.ready は画像が読み込まれるのを待ちません。つまり、ページに高さ属性のない画像がある場合、最終的に読み込まれる DOM は高くなります。

自分で試してみてください: http://jsfiddle.net/vww42sqm/ (注意してください。)

またはこれを取る：

$(document).ready(function() {
    var documentHeight = $(document).height()
    console.log('document height (document.ready): ' + documentHeight);
});


$(window).load(function() {
    var documentHeight = $(document).height()
    console.log('document height (window.load): ' + documentHeight);
});
于 2013-05-06T14:46:08.603 に答える
-1

だろう

$('body').height()

仕事 ？私は自分の Web ページで同じ種類のスクリプトを使用しています。これは、Web ページの高さを決定するために使用するものです。

これがあなたが探しているものではない場合、または希望どおりに機能しない場合は、さらに多くのコードを用意しています。

編集 ：

$(document).ready(function () {
    var documentHeight = $('body').height()
});

その後、window.scrollTop の代わりに documentHeight を呼び出します。

于 2012-06-29T20:21:23.603 に答える