gxt panel scroll with mouse scroll

Stick div to top of page when start scrolling

the problem is similar to THIS . It is something like a “Stick div to top of page when start scrolling”.

In the above link, a lot of solutions are for jQuery. I need the gxt/gwt way.

 

gwt/gxt

In gwt we have scrollListener which can be used to achieve this by overwriting the onScroll() method. Doing it this way might make our app slow sometimes.

In GXT we have the Window.ScrollHandler().

something like:

com.google.gwt.user.client.Window.addWindowScrollHandler(new Window.ScrollHandler() {
            @Override
            public void onWindowScroll(Window.ScrollEvent event) {
                int topPosition = event.getScrollTop();
                boolean hasTopStyle = westPanel.getStyleName().contains(resources.css().westPanelTop());
                if (topPosition > 97 && !hasTopStyle) {
                    westPanel.addStyleName(resources.css().westPanelTop());
                }
                if(topPosition <= 97 && hasTopStyle){
                    westPanel.removeStyleName(resources.css().westPanelTop());
                }
            }
        });

My banner has a height of 97.
for the “westPanelTop” css, we just need to add a fixed to it.

.west-panel-top{
    position: fixed !important;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s