javascript - iScroll move header up or down while scrolling -


i trying build function moves header 45px while scrolling down , reverse. should facebook header mobile app, or address-bar of chrome mobile browser or safari mobile browser. using scrolling iscroll plugin , managed let header moving while scrolling down , moving down again while scrolling up. not working. stuck while scrolling.

this js code:

function updateposition () {         var wrapperposition         = this.y;         var laststopposition        = $('#header').attr('data-last-value');         var distance                = wrapperposition - laststopposition;          var getmatrixstyle          = window.getcomputedstyle($('#header').get(0));         var getmatrix               = new webkitcssmatrix(getmatrixstyle.webkittransform);         var matrixpositionheader    = getmatrix.m42;          var moveup                  = matrixpositionheader - 1;         var movedown                = matrixpositionheader + 1;          if(wrapperposition >= -45 && wrapperposition <= 0 && distance < 0) {             $('#header').css({ '-webkit-transform' : 'translate(0,' + wrapperposition + 'px)' });         }          else if(wrapperposition <= -46 && distance < 0) {             $('#header').css({ '-webkit-transform' : 'translate(0,-45px)' });         }          else if(wrapperposition <= -46 && distance > 0) {             if(matrixpositionheader <= -1){                 $('#header').css({ '-webkit-transform' : 'translate(0,' + movedown + 'px)' });             }              else if(matrixpositionheader == 0){                 $('#header').removeattr('style');             }         }          else if(distance > 0 && distance <= 45){             if(matrixpositionheader <= -1){                 $('#header').css({ '-webkit-transform' : 'translate(0,' + movedown + 'px)' });             }              else if(matrixpositionheader == 0){                 $('#header').removeattr('style');             }         }          writeposition.innerhtml     = this.y>>0;         writeposition3.innerhtml    = distance;     }      function scrollstart() {         var getmatrixstyle          = window.getcomputedstyle($('#innerwrapper').get(0));         var getmatrix               = new webkitcssmatrix(getmatrixstyle.webkittransform);         var matrixpositionwrapper   = getmatrix.m42;          writeposition2.innerhtml    = matrixpositionwrapper;     }      function scrollend() {         var getmatrixstyle          = window.getcomputedstyle($('#innerwrapper').get(0));         var getmatrix               = new webkitcssmatrix(getmatrixstyle.webkittransform);         var matrixpositionwrapper   = getmatrix.m42;          $('#header').attr('data-last-value', matrixpositionwrapper);          writeposition4.innerhtml    = matrixpositionwrapper;     }      function loaded () {         var myscroll;         writeposition = document.getelementbyid('position');         writeposition2 = document.getelementbyid('position2');         writeposition3 = document.getelementbyid('position3');         writeposition4 = document.getelementbyid('position4');          myscroll = new iscroll('#wrapper', {                                               probetype: 3,                                               mousewheel: true,                                              speedratioy: 40                                             });          myscroll.on('scrollstart', scrollstart);         myscroll.on('scroll', updateposition);         myscroll.on('scrollend', scrollend);     }      document.addeventlistener('touchmove', function (e) { e.preventdefault(); }, false);

my html:

<div style="position:absolute; top: 110px;z-index:100; left: 120px;">innerwrapper y position: <strong id="position">0</strong> px</div>     <div style="position:absolute; top: 130px;z-index:100; left: 120px;">start position: <strong id="position2">0</strong> px</div>     <div style="position:absolute; top: 150px;z-index:100; left: 120px;">distance betweent start/stop position: <strong id="position3">0</strong> px</div>     <div style="position:absolute; top: 170px;z-index:100; left: 120px;">last stop position: <strong id="position4">0</strong> px</div>     <header id="header" role="banner" data-last-value="0">         <div class="header-main"></div>         <!-- end header main -->          <div class="header-bar"></div>         <!-- end header bar -->     </header>     <!-- end header -->      <div id="wrapper">          <div id="innerwrapper">             <ul>                 <li>content</li>                 .....             </ul>         </div>         <!-- end inner wrapper -->     </div>     <!-- end wrapper -->

here link testing: http://jsfiddle.net/bp9hy/1/

to see problem, try scroll few times , down stop scrolling in between (e.g. scroll 120px down , stop. scroll again).

thanks helping.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more