| const main = {}; | |
| const updateScroll = () => { | |
| main.winScroll = $(window).scrollTop(); | |
| }; | |
| const parallaxLoad = () => { | |
| const $someEl = $('.someEl'); | |
| $someEl.each((i,el) => { | |
| let $el = $(el); |
| const main = {}; | |
| const inViewport = ($el) => { | |
| let winTop = main.winScroll; | |
| let winBtm = winTop + main.winHeight; | |
| let $elTop = $el.offset().top; | |
| let $elBtm = $elTop + $el.outerHeight(); | |
| return $elBtm > winTop && $elTop < winBtm; | |
| } | |
| if (inViewport($el) === true) { |
| const main = {}; | |
| const updateScroll = () => { | |
| main.winScroll = $(window).scrollTop(); | |
| if (!main.winScrollMem) { | |
| main.winScrollMem = 0; | |
| } | |
| if (main.winScroll > main.winScrollMem) { | |
| main.winScrollDir = 'down'; | |
| } else { | |
| main.winScrollDir = 'up'; |
| <!-- tk optimize // http://goo.gl/2A1IF7 --> | |
| <script type = "text/javascript" > (function(e) { | |
| var t = 3e3; | |
| if (window.sessionStorage) { | |
| if (sessionStorage.getItem("useTypekit") === "false") { | |
| t = 0; | |
| } | |
| } | |
| var n = { | |
| kitId: "abcd1234", |
| var oXhr; | |
| oXhr = new XMLHttpRequest(); | |
| oXhr.id = (new Date()).getTime(); | |
| oXhr.onreadystatechange = function() { | |
| if (oXhr.readyState === 4 && (oXhr.status === 200)) { | |
| // code stuffs | |
| console.log(this.id); | |
| } |
| var i = 0; | |
| var timer = setInterval(function(){ | |
| // stuff | |
| if(i === 5) { | |
| clearInterval(timer); | |
| console.log('callback'); // callback after some time | |
| } | |
| }, 200); |
Ok I finally have this figured out.
First off, if you aren't familiar with the way GAE handles templating... it's a bit different than you would expect, but a pillar of getting this to work correctly.
This is what you want at the bottom of your app.yaml
- url: /
static_files: dist/index.html
upload: dist/index.html
expiration: "15m"
| // -- headroom --------------- | |
| (function($) { | |
| var headOffset = (app.obj.$section.filter('.feature').height() / 2) - (app.obj.$header.height()); | |
| app.obj.$header.headroom({ | |
| 'offset': headOffset, | |
| 'tolerance': 5, | |
| 'classes': { | |
| 'initial': 'animated', | |
| 'pinned': 'slideDown', | |
| 'unpinned': 'slideUp' |
| <!doctype html> | |
| <html ng-app="myApp"> | |
| <head>...</head> | |
| <body ng-controller="myController" ng-class="(toggleClass1 ? 'class-1' : '')+' '+(toggleClass2 ? 'class-2' : '')"> | |
| <div> | |
| stuff... | |
| <div class="button1" ng-click="$toggleClass1 = !$toggleClass1"></div> | |
| stuff... | |
| <div class="button2" ng-click="$toggleClass2 = !$toggleClass2"></div> | |
| </div> |
| <!doctype html> | |
| <html ng-app="myApp"> | |
| <head>...</head> | |
| <body ng-controller="myController" ng-class="toggleClass ? 'click-active' : 'click-inactive'"> | |
| <div ng-include="/path/myInclude.html"></div> | |
| </body> | |
| </html> |