0

div 要素からの距離とブラウザの bootom 自体を更新するにはどうすればよいですか?

要素からウィンドウの下部までの距離を計算するコードの一部を次に示します。ユーザーがスクロールしても値が更新されないにもかかわらず、正常に機能します。いくつかのブロックがあり、これらのいずれかがウィンドウの端に近づいているかどうかを知る必要があると仮定しましょう。前に述べたように、これはオンロードの距離を計算しますが、ユーザーがページをスクロールした場合に値を更新する必要があります。何か案は？

var the_height = $(window).height(); // viewport height
var activeimage = $(this);  // div element
distanceBottom = the_height - activeimage.offset().top + activeimage.height();

jsフィドル

そして今、フィドルもここにあるので、距離の値が必要なのは、ツールチップが可視領域内にあることを確認したいからです。私の最初のアイデアは、親指が本当に端に近い場合、ツールチップの位置を親指の上に移動することでした。距離が必要なところです

4

1 に答える 1

3

コードを window.scroll イベント内にラップすると、ドキュメントがスクロールされるたびに呼び出されます。ドキュメントの onload イベントに配置すると、一度呼び出されるため、その後は更新されません。

$(window).scroll(function () { 
    var the_height = $(window).height(); // viewport height
    var activeimage = $(this);  // div element
    distanceBottom = the_height - activeimage.offset().top + activeimage.height();
});

アップデート

あなたの要件を正しく理解しているかどうかはわかりません。関数定義のコメントアウトは役に立ちますか? また、distanceBottom 変数の使用も見当たりません。

$(document).ready(function () {


    $('div.thumbnail-item').mouseenter(function(e) {

        contents = $(this).find('.tooltip').find('.invisible').html();
        tooltip = $(this).find('.tooltip').find('img');
        wholetooltip = $(this).find('.tooltip');
        var activeimage = $(this);  // div element

        tooltip.attr('src', contents);
        //$(window).scroll(function () { 
        var the_height = $(window).height(); // viewport height
        distanceBottom = the_height - activeimage.offset().top + activeimage.height();
        //});


        if (tooltip[0].complete) { // if image already loaded
            tooltipWidth = wholetooltip.width();
            tooltipHeight = wholetooltip.height();

            imgwidth = activeimage.width();
            imgheight = activeimage.height();

            test = 0 - tooltipHeight + imgheight; // will position nice without gray border


            activeimage.css('z-index','999')
        .children("div.tooltip")
        .css({'top': test,'left': imgwidth + 30,'display':'block'});



        } else { // if image not loaded
        tooltip.load(function() {

            imgwidth = activeimage.width();
            imgheight = activeimage.height();
            test = activeimage.offset().top - activeimage.offset().top - imgheight;

            activeimage.css('z-index','999')
        .children("div.tooltip")
        .css({'top': test,'left': imgwidth + 30,'display':'block'});



            tooltip.css({
            'border-color': 'red',
            'border-width': '5px'
            });
        });
        }



    }).mouseleave(function() {

        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index','10')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");
    });

});
于 2012-10-17T19:31:49.600 に答える