{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/893","labels_url":"https://api.github.com/repos/angular/material/issues/893/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/893/comments","events_url":"https://api.github.com/repos/angular/material/issues/893/events","html_url":"https://github.com/angular/material/issues/893","id":51545935,"number":893,"title":"`md-content` should expand on toolbar `md-scroll-shrink`","user":{"login":"MathiasLM","id":510217,"avatar_url":"https://avatars.githubusercontent.com/u/510217?v=3","gravatar_id":"","url":"https://api.github.com/users/MathiasLM","html_url":"https://github.com/MathiasLM","followers_url":"https://api.github.com/users/MathiasLM/followers","following_url":"https://api.github.com/users/MathiasLM/following{/other_user}","gists_url":"https://api.github.com/users/MathiasLM/gists{/gist_id}","starred_url":"https://api.github.com/users/MathiasLM/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MathiasLM/subscriptions","organizations_url":"https://api.github.com/users/MathiasLM/orgs","repos_url":"https://api.github.com/users/MathiasLM/repos","events_url":"https://api.github.com/users/MathiasLM/events{/privacy}","received_events_url":"https://api.github.com/users/MathiasLM/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/11","labels_url":"https://api.github.com/repos/angular/material/milestones/11/labels","id":865967,"number":11,"title":"Backlog","description":"Grouping for issues that have been reviewed and require further information before assignment to milestone is possible.","creator":{"login":"ThomasBurleson","id":210413,"avatar_url":"https://avatars.githubusercontent.com/u/210413?v=3","gravatar_id":"","url":"https://api.github.com/users/ThomasBurleson","html_url":"https://github.com/ThomasBurleson","followers_url":"https://api.github.com/users/ThomasBurleson/followers","following_url":"https://api.github.com/users/ThomasBurleson/following{/other_user}","gists_url":"https://api.github.com/users/ThomasBurleson/gists{/gist_id}","starred_url":"https://api.github.com/users/ThomasBurleson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThomasBurleson/subscriptions","organizations_url":"https://api.github.com/users/ThomasBurleson/orgs","repos_url":"https://api.github.com/users/ThomasBurleson/repos","events_url":"https://api.github.com/users/ThomasBurleson/events{/privacy}","received_events_url":"https://api.github.com/users/ThomasBurleson/received_events","type":"User","site_admin":false},"open_issues":53,"closed_issues":20,"state":"open","created_at":"2014-11-14T00:54:02Z","updated_at":"2015-01-28T17:17:57Z","due_on":null,"closed_at":null},"comments":2,"created_at":"2014-12-10T11:10:42Z","updated_at":"2015-01-30T09:55:46Z","closed_at":null,"body":"Because `md-scroll-shrink` moves `md-content` up, it makes it unsuitable for use on a static viewport page, such as typical apps. I've looked at the code, and here's my suggested fix:\r\n\r\n### toolbar.js\r\n\r\n```javascript\r\n[...]\r\n\r\n      function setupScrollShrink() {\r\n        [...]\r\n        var contentHeight;\r\n        [...]\r\n\r\n        function onMdContentLoad($event, newContentEl) {\r\n            [...]\r\n            contentHeight = contentElement.prop('offsetHeight');\r\n            [...]\r\n\r\n        function onContentScroll(e) {\r\n            [...]\r\n            contentElement.css(\r\n              'height',\r\n              (contentHeight + (-(toolbarHeight - y) * shrinkSpeedFactor)) + 'px'\r\n            );\r\n            [...]\r\n```\r\n\r\nThis fix makes `md-content` seems as though it has a static height, and thus prevents the bottom from bouncing up and down."},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/72178054","html_url":"https://github.com/angular/material/issues/893#issuecomment-72178054","issue_url":"https://api.github.com/repos/angular/material/issues/893","id":72178054,"user":{"login":"matthiasg","id":231889,"avatar_url":"https://avatars.githubusercontent.com/u/231889?v=3","gravatar_id":"","url":"https://api.github.com/users/matthiasg","html_url":"https://github.com/matthiasg","followers_url":"https://api.github.com/users/matthiasg/followers","following_url":"https://api.github.com/users/matthiasg/following{/other_user}","gists_url":"https://api.github.com/users/matthiasg/gists{/gist_id}","starred_url":"https://api.github.com/users/matthiasg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthiasg/subscriptions","organizations_url":"https://api.github.com/users/matthiasg/orgs","repos_url":"https://api.github.com/users/matthiasg/repos","events_url":"https://api.github.com/users/matthiasg/events{/privacy}","received_events_url":"https://api.github.com/users/matthiasg/received_events","type":"User","site_admin":false},"created_at":"2015-01-30T09:55:46Z","updated_at":"2015-01-30T09:55:46Z","body":"i actually looked into this too for our own application. there are a number of issues with all solutions available so far. \r\n\r\nI think a correct solution will only be achievable once `position:sticky` is supported by all browsers. On mobile devices you always have a lag between scroll event and javascript (to allow for smooth touch based scrolling). Note: Support for click through of transparent parts of divs without loosing  clickability and scrollability would work too.\r\n\r\nEven the solution as currently implemented does not actually work. When you make the md-toolbar in the example page big enough (e.g. 200px) and then remove items until all items would fit into the main area the scrollbar will vanish and you wont be able to reach the last few items anymore.\r\n\r\nIn our case we built two different solutions for mobile and desktop (difference being one has visible scrollbars the other has not) in the desktop case we reposition on the scroll event which is perfectly stable and looks great and in the mobile case we reposition the header in its own layer on top of the scrollable area (with content pushed down of course)."}}