{"action":"created","issue":{"url":"https://api.github.com/repos/ipython/ipython/issues/7997","labels_url":"https://api.github.com/repos/ipython/ipython/issues/7997/labels{/name}","comments_url":"https://api.github.com/repos/ipython/ipython/issues/7997/comments","events_url":"https://api.github.com/repos/ipython/ipython/issues/7997/events","html_url":"https://github.com/ipython/ipython/pull/7997","id":60243107,"number":7997,"title":"Add sticky header effect without Javascript","user":{"login":"rsmith31415","id":599274,"avatar_url":"https://avatars.githubusercontent.com/u/599274?v=3","gravatar_id":"","url":"https://api.github.com/users/rsmith31415","html_url":"https://github.com/rsmith31415","followers_url":"https://api.github.com/users/rsmith31415/followers","following_url":"https://api.github.com/users/rsmith31415/following{/other_user}","gists_url":"https://api.github.com/users/rsmith31415/gists{/gist_id}","starred_url":"https://api.github.com/users/rsmith31415/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rsmith31415/subscriptions","organizations_url":"https://api.github.com/users/rsmith31415/orgs","repos_url":"https://api.github.com/users/rsmith31415/repos","events_url":"https://api.github.com/users/rsmith31415/events{/privacy}","received_events_url":"https://api.github.com/users/rsmith31415/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ipython/ipython/labels/notebook","name":"notebook","color":"381ed1"},{"url":"https://api.github.com/repos/ipython/ipython/labels/waiting-for-author","name":"waiting-for-author","color":"ededed"}],"state":"closed","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/ipython/ipython/milestones/21","html_url":"https://github.com/ipython/ipython/milestones/4.0","labels_url":"https://api.github.com/repos/ipython/ipython/milestones/21/labels","id":811827,"number":21,"title":"4.0","description":"IPython 4.0","creator":{"login":"minrk","id":151929,"avatar_url":"https://avatars.githubusercontent.com/u/151929?v=3","gravatar_id":"","url":"https://api.github.com/users/minrk","html_url":"https://github.com/minrk","followers_url":"https://api.github.com/users/minrk/followers","following_url":"https://api.github.com/users/minrk/following{/other_user}","gists_url":"https://api.github.com/users/minrk/gists{/gist_id}","starred_url":"https://api.github.com/users/minrk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/minrk/subscriptions","organizations_url":"https://api.github.com/users/minrk/orgs","repos_url":"https://api.github.com/users/minrk/repos","events_url":"https://api.github.com/users/minrk/events{/privacy}","received_events_url":"https://api.github.com/users/minrk/received_events","type":"User","site_admin":false},"open_issues":219,"closed_issues":88,"state":"open","created_at":"2014-10-02T18:55:15Z","updated_at":"2015-04-08T22:45:44Z","due_on":null,"closed_at":null},"comments":111,"created_at":"2015-03-08T06:01:48Z","updated_at":"2015-04-08T23:44:45Z","closed_at":"2015-04-08T05:15:28Z","pull_request":{"url":"https://api.github.com/repos/ipython/ipython/pulls/7997","html_url":"https://github.com/ipython/ipython/pull/7997","diff_url":"https://github.com/ipython/ipython/pull/7997.diff","patch_url":"https://github.com/ipython/ipython/pull/7997.patch"},"body":"This is supposed to be a step to fix issue #7968. It allows to obtain the same current behavior without using Javascript and then it will be possible to fix #7701. However, more input is needed.\r\n\r\nSticky header when scrolling down:\r\n\r\n![screenshot from 2015-03-07 21 23 29](https://cloud.githubusercontent.com/assets/599274/6544330/a2fda044-c510-11e4-9eda-bc4521d4cbc2.png)\r\n\r\nKeeping the same margin between `#header` and `#site` elements when resizing window:\r\n\r\n![screenshot from 2015-03-07 21 25 08](https://cloud.githubusercontent.com/assets/599274/6544331/be48e214-c510-11e4-8513-7796590183eb.png)\r\n\r\nSmall issue. If there are scrollbars, the width of the window is calculated differently. As a consequence, the media query is not activated as it should when the header's height is increased:\r\n\r\n![screenshot from 2015-03-07 21 25 51](https://cloud.githubusercontent.com/assets/599274/6544332/d9c914d2-c510-11e4-93b8-d30329bb5d4d.png)\r\n\r\nIf the browser is shrunk a bit more, then the media query takes effect. Unfortunately, I don't think there is a clean solution for this. Removing the media queries could be an option to give a more consistent behavior although this reduces the margin between `#header` and `#site` in small windows.\r\n\r\n`/tree` page is not affected by these changes because I added classes specific to `/tree` and `/notebook`."},"comment":{"url":"https://api.github.com/repos/ipython/ipython/issues/comments/91070031","html_url":"https://github.com/ipython/ipython/pull/7997#issuecomment-91070031","issue_url":"https://api.github.com/repos/ipython/ipython/issues/7997","id":91070031,"user":{"login":"rsmith31415","id":599274,"avatar_url":"https://avatars.githubusercontent.com/u/599274?v=3","gravatar_id":"","url":"https://api.github.com/users/rsmith31415","html_url":"https://github.com/rsmith31415","followers_url":"https://api.github.com/users/rsmith31415/followers","following_url":"https://api.github.com/users/rsmith31415/following{/other_user}","gists_url":"https://api.github.com/users/rsmith31415/gists{/gist_id}","starred_url":"https://api.github.com/users/rsmith31415/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rsmith31415/subscriptions","organizations_url":"https://api.github.com/users/rsmith31415/orgs","repos_url":"https://api.github.com/users/rsmith31415/repos","events_url":"https://api.github.com/users/rsmith31415/events{/privacy}","received_events_url":"https://api.github.com/users/rsmith31415/received_events","type":"User","site_admin":false},"created_at":"2015-04-08T23:44:45Z","updated_at":"2015-04-08T23:44:45Z","body":"@minrk I'm an idiot. The reason there was a performance degradation was not CodeMirror but a mistake I made in which I forgot to set `overflow: scroll;` to the `#site` element (I think instead I set something similar to the body, which doesn't make sense.) The fixed header using flexbox works okay and shouldn't be a problem at all.\r\n\r\nI pushed the changes in case you're interested. Print preview works okay using the `position: absolute;` hack and, as you said, no need to use `container_` anymore."}}