Jump to content

Problems Using ipsSticky in Sidebar


Recommended Posts

I'm looking to create an ad unit in my sidebar at the bottom, which becomes sticky as the user scrolls down. However, my problem is that when the user scrolls to the footer, the sticky element remains and creates an overlap, over the footer.

I have been using the following page for information on how to achieve this:

<div data-ipsSticky data-relativeTo='#element' data-stickyClass='StickyMargin' data-disableIn='tablet'>
 <div class="ipsPad_half">
  <img src="URL" class="ipsImage">

Above is the code I am using. The first data attribute used is the ipsSticky which is the primary attribute, giving the widget the sticky function. The other data attributes are optional, which we are seeking to use. From what I am reading on the ips.ui.sticky tutorial linked above, the relativeTo attribute is the one which would seek to do what we are trying to do, have the sticky block element return to non-sticky state when the user reaches a certain part of the page. That would then prevent the overlap of the widget.

However, I can't seem to get it to work as expected and no matter what class or ID I enter into the relativeTo - I see no difference in the behaviour of the widget. Likewise, using the disableIn (which is supposed to disable the sticky feature on specified devices), does nothing and the widget remains sticky on tablet size.

One way for us to solve this would be to look at the javascript function for this sticky functionality, but we can't seem to locate where it exists.

From what I can see the javascript that exists, does a calculation on the widget position and once it reaches the point where it should stick, the style changes from:

 style="position: static; z-index: 5100; top: auto;"


style="position: fixed; z-index: 5600; top: 253px; width: 313px;"

The problem is that once the style has changed, no amount of scrolling reverts it back to the original static position (non-sticky). Even though we would like the position to be reverted back as soon as the widget reaches the footer area.

Has anyone got experience in dealing with this sticky functionality that can perhaps point me in the right direction or show where I may be going wrong.

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...