Question

I’ve written some jQuery code to display a box with data in the corner of the users’ web browser. I’m using the .scroll event to make the box stay in the corner as the user scrolls up and down the page. Let me emphasize that I am not using jquery-ui dialog.

The only problem is that the box flickers as the page scrolls. I’m afraid that there will be no cross-browser solution to this problem as the different browsers seem to behave differently with scrolling. Barring a cross-browser solution, an IE solution would be nice (My web application is designed to be used by a specific group of about 100 users in my organization.)

Here are snippets of the relative code:

ExternalScroll: function () {
            LittleBlackBook.setPosition();
        }

    setPosition: function () {
        var scrollPosition = $(self).scrollTop();
        var cssTop = LittleBlackBookStatic.determineCssTop(this.height, this.isTop, this.vOffset, scrollPosition);
        var cssHeight = LittleBlackBookStatic.determineCssHeight(this.height);
        var cssLeft = LittleBlackBookStatic.determineCssLeft(this.width, this.isLeft, this.hOffset);
        var cssWidth = LittleBlackBookStatic.determineCssWidth(this.width);
        this.jQueryObj.css('top', cssTop);
        this.jQueryObj.css('height', cssHeight);
        this.jQueryObj.css('left', cssLeft);
        this.jQueryObj.css('width', cssWidth);
    }

var LittleBlackBookStatic = {
    determineCssTop: function (height, isTop, vOffset, vScroll) {
        var windowHeight = $(self).height();
        var scrollPosition = $(self).scrollTop();
        var newModalTop = isTop ? vOffset + vScroll : windowHeight - height + vScroll - vOffset;
        return newModalTop + 'px';
    },

    determineCssHeight: function (height) {
        return height + 'px';
    },

    determineCssLeft: function (width, isLeft, hOffset) {
        var windowWidth = $(self).width();
        var newModalLeft = isLeft ? hOffset : windowWidth - width - hOffset;
        return newModalLeft + 'px';
    },

    determineCssWidth: function (width) {
        return width + 'px';
    }
} // end LittleBlackBookStatic

I’m using jQuery to look up the scroll position as the page scrolls and change the CSS.

Is there a better way; a way that will make it scroll without flickering? If no, then why not?

Answer 1

You should use fixed positioning for that box instead instead of animating it to keep it in the corner.

You’ll use less javascript and avoid flickering that comes with animation.