March 23, 2016 in Technical Problems
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'>
<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.
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.
This topic is now archived and is closed to further replies.
Started Monday at 08:54 AM
Started December 23, 2022
Started September 8