简体   繁体   中英

Scrolling sidebar position on page load

How can I make my scrolling sidebar set its correct position on document ready without an animation? Keep in mind, I want to keep the animation for general scrolling after page load.

I used .scroll() to trigger a scroll on load but this looks sloppy when halfway down a page and you're waiting for the sidebar to catch up.

http://jsfiddle.net/b4MaJ/1/

w.scroll(function () {
    if (w.scrollTop() > offset.top) {
        sidebar.stop().animate({
            marginTop: w.scrollTop() - offset.top + 45
        }, function () {
            distance = (footer.offset().top - footer.outerHeight()) - sidebar.offset().top;
            if (distance <= 50) {
                sidebar.stop().animate({
                    opacity: 0
                }, 250);
            } else {
                sidebar.stop().animate({
                    opacity: 1
                }, 250);
            }
        });
    } else {
        sidebar.stop().animate({
            marginTop: 0
        });
    }
}).scroll();

use position:fixed; in .customerOrder

DEMO

.customerOrder {
    background: red;
    position:fixed;
    top:30px;
    right:5px;
}

Remove Jquery

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM