Question

I’m using javascript to move a div down the page as you scroll. I found the code online and it works for what I needed. The problem I’m running into is for lower screen resolutions (ipad) where you have to scroll down to see the footer past the main content area, the scrolling div pushes down to get onto the screen, changing the height of the divs and body, which makes you be able to endlessly scroll down the page. The div scrolls by adding a margin to the top of the div being moved as you scroll. I’ve tried setting heights on all the containing divs and body but nothing seems to be working css-wise, and I don’t know enough about javascript to set some sort of condition.

The page I’m working on is http://gwa-inc.com/pages.aspx?pid=31&name=Americana

If you make your browser window height smaller and scroll down the page, you’ll see what I’m talking about. Is there an easy fix to this that I’m missing?

Script being used is:

var $sidebar = $(".subMenuWrap"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 30;

        $window.scroll(function () {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        });

Answer 1

You should absolutely position the box that needs to scroll, so that it will be pulled out of the flow of the page. Then you can more closely control where that box goes and can keep it from pushing the footer down further.