{"action":"opened","issue":{"url":"https://api.github.com/repos/zurb/foundation-sites/issues/9892","repository_url":"https://api.github.com/repos/zurb/foundation-sites","labels_url":"https://api.github.com/repos/zurb/foundation-sites/issues/9892/labels{/name}","comments_url":"https://api.github.com/repos/zurb/foundation-sites/issues/9892/comments","events_url":"https://api.github.com/repos/zurb/foundation-sites/issues/9892/events","html_url":"https://github.com/zurb/foundation-sites/issues/9892","id":216492531,"number":9892,"title":"Sticky component doesn't honor data-sticky-on attribute","user":{"login":"gpspake","id":3385690,"avatar_url":"https://avatars0.githubusercontent.com/u/3385690?v=3","gravatar_id":"","url":"https://api.github.com/users/gpspake","html_url":"https://github.com/gpspake","followers_url":"https://api.github.com/users/gpspake/followers","following_url":"https://api.github.com/users/gpspake/following{/other_user}","gists_url":"https://api.github.com/users/gpspake/gists{/gist_id}","starred_url":"https://api.github.com/users/gpspake/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gpspake/subscriptions","organizations_url":"https://api.github.com/users/gpspake/orgs","repos_url":"https://api.github.com/users/gpspake/repos","events_url":"https://api.github.com/users/gpspake/events{/privacy}","received_events_url":"https://api.github.com/users/gpspake/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-03-23T16:34:13Z","updated_at":"2017-03-23T16:34:13Z","closed_at":null,"body":"#### How to reproduce this bug:\r\n\r\n1. Create a layout with sticky elements in accordance with the [sticky component examples in the docs](http://foundation.zurb.com/sites/docs/sticky.html)\r\n2. Set `data-sticky-on=\"large\"` attribute on sticky elements\r\n\r\n#### What should happen:\r\nelements should only be sticky on large and all dom manipulations associated with the sticky component should not be applied on screen sizes smaller than the one specified in the `data-sticky-on` attribute.\r\n\r\n#### What happened instead:\r\nIt seems like it's trying to work but there are lots of side effects and it's highly prone to jank. dom manipulations continue to occur on screens smaller than the one specified which can result in overlapping elements, disappearing elements, and other jankiness.\r\n\r\n#### Test case:\r\nHere's a [codepen that demonstrates the problem](http://codepen.io/gpspake/pen/ZeodJB?editors=1000). \r\nThis layout includes left nav, a main content area, and a right nav and utilizes source ordering and sticky sidebars.\r\n**On mobile**: Main content is full width, Left nav and Right nav are positioned below main content\r\n**On medium**: source ordering kicks in and moves the sticky left nav to the left of main content, right nav stays at the bottom\r\n**On large**: left nav is sticky, main content scrolls, right nav is sticky\r\n\r\nFor reference, here's the same [codepen](http://codepen.io/gpspake/pen/VpxowR?editors=1000) without the sticky classes to demonstrate that the layot itself (i.e. the source ordering) is behaving as expected.\r\n\r\nI hope the issue here is that I'm just not using the data-sticky-on properly :)\r\n\r\n"}}
{"actor":{"display_login":"gpspake"}}