Trying to get jQuery Floating div like mashable_问答_开发者

Trying to get jQuery Floating div like mashable

开发者 https://www.devze.com 2023-01-25 19:48 出处：网络

working from this sample http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html

Only difference is that I want my box to the right. The only change I have done is added the name of my main Container that wraps everything from the page. I have the floating box sitting before this "main-container" in its own 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&开发者_运维问答gt;</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>

Just change all of those lefts to rights. I think that this should do the trick?

<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>