3

div 内に div を作成しました。外側の div 内でページを上下にスクロールすると、内側の div が上下に浮き上がります。私はどういうわけか、外側のdivフォームから出ないように制限することができましたが、一番下になるとページの一番下まで下がります。私を助けてください、これが私のコードcssです

CSS

#comment {
  position: absolute;
  /* just used to show how to include the margin in the effect */
}

HTML

<!--the outer div in which i have whole content -->
<div class="content">
    <!--the floating div, remains well inside form top but moves down outside div from bottom -->
    <div class="ftwrapper" id="comment">            
    </div><!--fb/twitter ends-->
</div>

JQuery

    $(function () {
        var msie6 = $.browser == 'msie' && $.browser.version < 7;
        if (!msie6) {
            var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
            $(window).scroll(function (event) {
                // what the y position of the scroll is
                var y = $(this).scrollTop();

                // whether that's below the form
                if (y >= top) {
                    // if so, ad the fixed class
                    $('#comment').addClass('fixed');
                } else {
                    // otherwise remove it
                    $('#comment').removeClass('fixed');
                }
            });
        }  
    });
4

1 に答える 1

1

ご要望をもとにサンプルテストを行いました。スクロールが速すぎるとうまく機能しませんが、それ以外は問題ありません。後でいくつかの変更を加えます。

var prevScroll = 0;
$(window).unbind("scroll");
function reposition() {
    var contPos  = $("#container").offset();
    var comment = $('#comment');    
    contPos.bottom = contPos.top + $("#container").outerHeight();
    console.log('contPos',contPos);
    $(window).scroll(function (event) {
        // what the y position of the scroll is
        var     scroll = $(window).scrollTop()
            ,   y = scroll
            ,   pos = comment.offset()
        ;
        pos.bottom = comment.outerHeight();
        if ( scroll > prevScroll) {
            //down
        } else {
            //up
        }
        prevScroll = scroll;
        // whether that's below the form
        console.log(pos.bottom + scroll ,":", contPos.bottom);
        if (contPos.top > scroll) {
            // if so, ad the fixed class
            comment.css({
                position: 'relative',
                bottom  : '0px',
                left    : '0px'
            });
            console.log("Too High");
        } else if ( pos.bottom + scroll > contPos.bottom) {
            //comment.removeClass('fixed');
            comment.css({
                position: 'absolute',
                top      : (contPos.bottom - comment.outerHeight() )+'px',
                left     : pos.left+'px'
            });

            console.log("Too Low");
        } else {
            // middle area
            console.log("Perfect");
            comment.css({
                position: 'fixed',
                top   : '0px',
                left  : pos.left + 'px'
            });
        }
    });
}
$(document).ready(reposition);

Jsfiddle テスト

于 2013-11-03T19:05:39.097 に答える