Thứ Ba, 6 tháng 1, 2015

jQuery - div move with page scroll jquery

jQuery - div move with page scroll jquery


---o0o---


Original link

1. Creat div

This div move when scroll

            <div id="div">This div move when scroll</div>
        

2. Styled for div

            <style>
                #div {
                    background-color: #fca9a9;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            </style>
        

3. Add jQuery


        <script>
            $(window).scroll(function () {
                $('#div').stop().animate({
                    'marginTop': $(window).scrollTop() + 'px',
                    'marginLeft': $(window).scrollLeft() + 'px'
                }, 'slow');
            });
        </script>
        

4. Sample data to see how it works

scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!

Không có nhận xét nào:

Đăng nhận xét