Question

使用此示例http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html

唯一的区别是我希望我的盒子在右边。我所做的唯一改变是添加了我的主Container的名称，它包装了页面中的所有内容。我把漂浮盒放在这个“主容器”之前，在它自己的div中。

<html>
<head></head>
<body>
    <script type="text/javascript">

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

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

        if($('#main-container').length > 0){

            var bodyY = parseInt($('#main-container').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("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed);

                    if ( scrollY > bodyY && !isfixed ) {
                        $floatingbox.stop().css({
                            position: 'fixed',
                            left: '50%',
                            top: 20,
                            marginLeft: 500

                        });
                    } else if ( scrollY < bodyY && isfixed ) {
                        $floatingbox.css({
                            position: 'relative',
                            left: 0,
                            top: 0,
                            marginLeft: originalX
                        });
                    }

                }

            });
        }
    });
    </script>


<div id="floating-box">
    <div id="rightMenu">
        <ul id="rMenu">
            <li><a href="#">Schedule</a></li>
            <li><a href="#">Seminars / Events</a></li>
            <li><a href="#">Rates / Promotions</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    </div>
    <div id="main-container">
      All the page info and divs are in here...
    </div>
</body>
</html>

Answer 1

只需将所有这些左派改为权利。我认为这个应该做到这一点？

<html>
<head></head>
<body>
    <script type="text/javascript">

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

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

        if($('#main-container').length > 0){

            var bodyY = parseInt($('#main-container').offset().top) - 20;
            var originalX = $floatingbox.css('margin-right');

            $(window).scroll(function () { 

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

                if($floatingbox.length > 0){

                    $floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed);

                    if ( scrollY > bodyY && !isfixed ) {
                        $floatingbox.stop().css({
                            position: 'fixed',
                            right: '50%',
                            top: 20,
                            marginRight: 500

                        });
                    } else if ( scrollY < bodyY && isfixed ) {
                        $floatingbox.css({
                            position: 'relative',
                            right: 0,
                            top: 0,
                            marginRight: originalX
                        });
                    }

                }

            });
        }
    });
    </script>


<div id="floating-box">
    <div id="rightMenu">
        <ul id="rMenu">
            <li><a href="#">Schedule</a></li>
            <li><a href="#">Seminars / Events</a></li>
            <li><a href="#">Rates / Promotions</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    </div>
    <div id="main-container">
      All the page info and divs are in here...
    </div>
</body>
</html>

试图让jQuery Floating div像mashable一样

1 个答案: