1

スクロールするまでhtml要素が固定されないようにするにはどうすればよいですか? ユーザーがスクロールしている間は通常の位置になりますが、ユーザーがスクロールした後は画面から出ませんか?

4

3 に答える 3

1

リスナーをonscrollイベントにアタッチし、scrollTopが要素の Y 位置よりも大きい場合は、 に設定しposition: fixedます。

于 2012-05-27T16:58:50.120 に答える
0

私は以前にこのコードを使用しました:

http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/

(function($){
        $.fn.scrollFixed = function(params){
        params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
        var element = $(this);

        if(params.appearAfterDiv)
            var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
        else
            var distanceTop = element.offset().top;

        if(params.hideBeforeDiv)
            var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
        else
            var bottom = 200000;                

            $(window).scroll(function(){    
                if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )         
                    element.css({'position':'fixed', 'top':'5px'});
                else
                    element.css({'position':'static'});             
            });           
        };
    })(jQuery);

次に、要素を呼び出すだけです。

$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});
于 2012-05-27T16:59:40.167 に答える
0

jQuery Scrollfollow プラグインをご覧ください。これを使用して、その効果を便利に実現しました。

ビューに表示したい要素で呼び出すだけです。

<script type="text/javascript">
        $( '#example' ).scrollFollow();
</script>

イージング、位置、その他のパラメータを設定できます。

于 2012-05-27T17:14:48.800 に答える