{"action":"created","issue":{"url":"https://api.github.com/repos/ampproject/amphtml/issues/2911","repository_url":"https://api.github.com/repos/ampproject/amphtml","labels_url":"https://api.github.com/repos/ampproject/amphtml/issues/2911/labels{/name}","comments_url":"https://api.github.com/repos/ampproject/amphtml/issues/2911/comments","events_url":"https://api.github.com/repos/ampproject/amphtml/issues/2911/events","html_url":"https://github.com/ampproject/amphtml/issues/2911","id":148473166,"number":2911,"title":"Extending amp-dynamic-css-classes to support viewport intersections","user":{"login":"jpettitt","id":524856,"avatar_url":"https://avatars.githubusercontent.com/u/524856?v=3","gravatar_id":"","url":"https://api.github.com/users/jpettitt","html_url":"https://github.com/jpettitt","followers_url":"https://api.github.com/users/jpettitt/followers","following_url":"https://api.github.com/users/jpettitt/following{/other_user}","gists_url":"https://api.github.com/users/jpettitt/gists{/gist_id}","starred_url":"https://api.github.com/users/jpettitt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpettitt/subscriptions","organizations_url":"https://api.github.com/users/jpettitt/orgs","repos_url":"https://api.github.com/users/jpettitt/repos","events_url":"https://api.github.com/users/jpettitt/events{/privacy}","received_events_url":"https://api.github.com/users/jpettitt/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-04-14T20:27:27Z","updated_at":"2016-04-14T22:10:11Z","closed_at":null,"body":"A number of the sites we’re working on have elements that appear and disappear based on scroll position, mostly things like fixed header bars, floating social button overlays.\r\n\r\nI'm kicking around the idea of adding to `amp-dynamic-css-classes` the ability to specify viewport intersections and have classes added/removed to the `<body>` based on view-ability.\r\n\r\nSomething like\r\n\r\n```\r\n<amp-dynamic-css-classes>\r\n{\r\n       “viewports\": [\r\n               {\r\n                       “selector”: “div.somthing”,\r\n                       “viewable”: “class-to-add”,\r\n                       “hidden”: “class-to-add”.\r\n               }\r\n       ]\r\n}\r\n</amp-dyncamic-css-classes>\r\n\r\n```\r\nAlternatively, add to the elements themselves\r\n\r\n`<div class=”whatever” data-amp-viewable=“class-to-add-to-body”  data-amp-hidden=“class-to-add-to-body”></div>`\r\n\r\nPersonally I like the json version, it’s more in line with how other amp tags work.\r\n\r\nQuestions:\r\n\r\n1. Is this a good idea in general?\r\n2. Which model?\r\n3. Is there any need for specifying using pixel scroll position or % scroll position rather than element boundaries?\r\n\r\nThis, combined with normal css transforms would provide a great deal of the functionality that people currently implement with js.\r\n\r\nI'm looking for feedback before I go down the full intent to implement route."},"comment":{"url":"https://api.github.com/repos/ampproject/amphtml/issues/comments/210176392","html_url":"https://github.com/ampproject/amphtml/issues/2911#issuecomment-210176392","issue_url":"https://api.github.com/repos/ampproject/amphtml/issues/2911","id":210176392,"user":{"login":"cramforce","id":89679,"avatar_url":"https://avatars.githubusercontent.com/u/89679?v=3","gravatar_id":"","url":"https://api.github.com/users/cramforce","html_url":"https://github.com/cramforce","followers_url":"https://api.github.com/users/cramforce/followers","following_url":"https://api.github.com/users/cramforce/following{/other_user}","gists_url":"https://api.github.com/users/cramforce/gists{/gist_id}","starred_url":"https://api.github.com/users/cramforce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cramforce/subscriptions","organizations_url":"https://api.github.com/users/cramforce/orgs","repos_url":"https://api.github.com/users/cramforce/repos","events_url":"https://api.github.com/users/cramforce/events{/privacy}","received_events_url":"https://api.github.com/users/cramforce/received_events","type":"User","site_admin":false},"created_at":"2016-04-14T22:10:11Z","updated_at":"2016-04-14T22:10:11Z","body":"CC @ericlindley-g "}}