0

divページとともにスクロールするサイドバーにフローティングがあります。フッターに到達したときに停止するコードを追加する方法はありますか?

実際のコードを参照してください: http://openbayou.staging.wpengine.com

float に使用される jQuery コードdiv:

$j=jQuery.noConflict();

$j(document).ready(function($) {

//this is the floating content
var $floatingbox = $('#one');

if($('#primary').length > 0){

    var bodyY = parseInt($('#primary').offset().top) - 20;
    var originalX = $floatingbox.css('margin-left');

    $(window).scroll(function () { 

        var scrollY = $(window).scrollTop();
        var isfixed = $floatingbox.css('position') == 'fixed';

        if($floatingbox.length > 0){

            $floatingbox.html();

            if ( scrollY > 1561 && !isfixed ) {
                $floatingbox.stop().css({
                    position: 'fixed',
                    top: 10,
                });
            } else if ( scrollY < 1561 && isfixed ) {
                $floatingbox.css({
                    position: 'relative',
                    top: 0,
                });
            }

        }

    });
}
});

4

3 に答える 3

0

サイドバーの z-index をフッターの z-index の後ろに設定しないのはなぜですか?

編集：私はこの結果が気に入らなかったので、jqueryでこの作業をあなたが望むようにしました...

スクロール機能でこれを試してください：

$(window).scroll(function () { 
floatingbox = $("#one");
            if(floatingbox.length > 0){
                //get our current scroll position
                var scrollY = $(window).scrollTop();
                //get the position of the tag cloud relative to the document
                var contentY = ($("#sidebar .sidebar-tag-cloud").offset().top + $("#sidebar .sidebar-tag-cloud").outerHeight(false));
                //calculate the largest possible top margin size before it starts to overlap the footer
                var lastY = $("#footer").offset().top - $("#one").outerHeight(false);
                //check if our scroll location is past the bottom of the tag cloud
                if ( scrollY > contentY )
                {
                    //check if the current top position is less than the maximum position
                    if(floatingbox.offset().top<lastY)
                    {
                        //keep scrolling
                        floatingbox.stop().animate({"marginTop":scrollY-contentY});
                    }else
                    {
                        //check if we have scrolled back up and have a space at the top
                        if(scrollY<floatingbox.offset().top)
                        {
                            floatingbox.stop().animate({"marginTop":scrollY-contentY});
                        }else
                        {
                            // hard set to the maximum position
                            floatingbox.stop().css({"marginTop":lastY-contentY});
                        }
                    }
                }               
            }
        });

また、タグ クラウドの下部の位置を取得し、ハードコードされた番号の代わりにそれを使用することで、もう少し動的にしました。

于 2013-04-25T00:42:28.007 に答える
0

さて、最新のjsfiddleを見た後。あなたのコードで動作するようにそのコードを修正しました。http://jsfiddle.net/Tgm6Y/4430/これにはアニメーションラグがなく、うまく機能するはずです。

$('#one').followTo('#two','#pointFive');

#two を #footer に、#pointFive を "#sidebar .sidebar-tag-cloud" に置き換えるだけで、コードで機能するはずです。

于 2013-04-26T00:23:30.013 に答える