{"action":"created","issue":{"url":"https://api.github.com/repos/d-oliveros/ngSticky/issues/138","repository_url":"https://api.github.com/repos/d-oliveros/ngSticky","labels_url":"https://api.github.com/repos/d-oliveros/ngSticky/issues/138/labels{/name}","comments_url":"https://api.github.com/repos/d-oliveros/ngSticky/issues/138/comments","events_url":"https://api.github.com/repos/d-oliveros/ngSticky/issues/138/events","html_url":"https://github.com/d-oliveros/ngSticky/issues/138","id":153154284,"number":138,"title":"Sticky element width doesn't update, use max-width instead","user":{"login":"nedkelly","id":569534,"avatar_url":"https://avatars.githubusercontent.com/u/569534?v=3","gravatar_id":"","url":"https://api.github.com/users/nedkelly","html_url":"https://github.com/nedkelly","followers_url":"https://api.github.com/users/nedkelly/followers","following_url":"https://api.github.com/users/nedkelly/following{/other_user}","gists_url":"https://api.github.com/users/nedkelly/gists{/gist_id}","starred_url":"https://api.github.com/users/nedkelly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nedkelly/subscriptions","organizations_url":"https://api.github.com/users/nedkelly/orgs","repos_url":"https://api.github.com/users/nedkelly/repos","events_url":"https://api.github.com/users/nedkelly/events{/privacy}","received_events_url":"https://api.github.com/users/nedkelly/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-05-05T02:06:27Z","updated_at":"2016-05-18T14:44:36Z","closed_at":null,"body":"When the `sticky` element sticks the current width is applied to the `style` attribute. When resizing the window this size cannot update because it will always be equal to the initial size: `initialCSS.width=width` is the same as `263=263` because you've explicitly declared the width - then retrieved the width.\r\n\r\nTo fix this use `width: 100%; max-width: XXpx;` instead, this way the element can properly resize.\r\n\r\n```css\r\nelement.style {\r\n    z-index: 10;\r\n    width: 100%;\r\n    max-width: 233px;\r\n    position: fixed;\r\n    top: 10px;\r\n    margin-top: 0px;\r\n}\r\n```\r\n\r\nCheers."},"comment":{"url":"https://api.github.com/repos/d-oliveros/ngSticky/issues/comments/220048726","html_url":"https://github.com/d-oliveros/ngSticky/issues/138#issuecomment-220048726","issue_url":"https://api.github.com/repos/d-oliveros/ngSticky/issues/138","id":220048726,"user":{"login":"axar","id":4378808,"avatar_url":"https://avatars.githubusercontent.com/u/4378808?v=3","gravatar_id":"","url":"https://api.github.com/users/axar","html_url":"https://github.com/axar","followers_url":"https://api.github.com/users/axar/followers","following_url":"https://api.github.com/users/axar/following{/other_user}","gists_url":"https://api.github.com/users/axar/gists{/gist_id}","starred_url":"https://api.github.com/users/axar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/axar/subscriptions","organizations_url":"https://api.github.com/users/axar/orgs","repos_url":"https://api.github.com/users/axar/repos","events_url":"https://api.github.com/users/axar/events{/privacy}","received_events_url":"https://api.github.com/users/axar/received_events","type":"User","site_admin":false},"created_at":"2016-05-18T14:44:36Z","updated_at":"2016-05-18T14:44:36Z","body":"```javascript\r\n$scope.getInitialDimensions = function() {\r\n            return {\r\n              zIndex: $elem.css('z-index'),\r\n              top: $elem.css('top'),\r\n              position: initialPosition, // revert to true initial state\r\n              marginTop: $elem.css('margin-top'),\r\n              marginBottom: $elem.css('margin-bottom'),\r\n              cssLeft: $elem.css('left'),\r\n              width: ($elem[0].style && $elem[0].style.width) || $elem[0].offsetWidth,\r\n              height: $elem.css('height')\r\n            };\r\n          };\r\n```\r\nYour solution didn't work for me; however, by setting style=\"width:100%\" on the element and then using the above width line for checking if it exists then fallback to offsetWidth works. This ensures that the elements with 100% are accounted correctly when we need them to be responsive. Since offsetWidth always gives you in px."}}