javascript - Scroll function make left contraction -


i'm using following script fixed menu when scroll page.

var num = 5; $(window).bind('scroll', function () {     if ($(window).scrolltop() > num) {         $('.scroll').css({'position':'fixed', 'top':'0px'});     } else {         $('.scroll').css({'position':'', 'top':''});     } });

i'm using script table. see jsfiddle. when scroll down, title going contraction left left side.

why it's happening , how can fix? should support major browsers(not ie).

when set position: fixed left prop seems set 0. hence, headers moving left corner. may have play display , width props you're after. note adding/removing class better setting inline styles via .css(). @ following demo , adapt code accordingly suit needs.

var num = 5;  $(document).bind('scroll', function () {      if ($(document).scrolltop() > num) {  		$('.scroll').addclass("scrolled");      } else {          $('.scroll').removeclass("scrolled");      }  });
.scroll { width: 100%; }  .scroll th { width: 49% }  .scrolled { position: fixed; top: 0; }  .scrolled th { display: inline-block; width: 47.5% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="mytable" width="100%">      <thead>          <tr class="scroll">              <th>id</th>              <th>value</th>          </tr>      </thead>      <tbody>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>          <tr>              <td align="center" width="20%">0</td>              <td align="center" width="20%">1</td>          </tr>                </tbody>  </table>

there may other ways of doing it, think of :)


Comments

Post a Comment

Popular posts from this blog

symfony - TEST environment only: The database schema is not in sync with the current mapping file -

there similar questions regarding issue haven't seen in particular test environment , sqlite. cannot validate schema test environment uses sqlite can validate schemas dev environment uses mysql. know reason , possible solution? whole application works fine in both dev , test environments though. phing , ci build broken. php app/console doctrine:schema:update --force --env=test updating database schema... database schema updated successfully! "9" queries executed php app/console doctrine:schema:validate --env=test [mapping] ok - mapping files correct. [database] fail - database schema not in sync current mapping file. update i'm adding sqldump result see if spots wrong it. thing can is, have 2 bundles. country below coming frontendbundle user entity missing defined in backendbundle . php app/console doctrine:schema:update --dump-sql --env=test drop index uniq_5373c9665e237e06; drop index uniq_5373c966d1f4eb9a; create temporary table __temp__country se...
Read more

twig - Using Twigbridge in a Laravel 5.1 Package -

i'm trying create laravel 5.1 package uses twigbridge instead of .php views. can normal .php views display fine, when try make use of .twig templates i'm met error. possible use twigbridge templates when creating views laravel package or pretty stuck blade , php ? edit 1: loading twig template without extending works. it's when start using {% extends 'file' %} error comes out. i error error loading /virtual/laravel/packages/username/mypackage/src/views/sample.twig: template "templates.master" not defined () in "/virtual/laravel/packages/username/mypackage/src/views/sample.twig" @ line 1. my folders username |_ mypackage |_ src |_ controllers - samplecontroller.php |_ views |_ templates - master.twig - sample.twig twig template sample.twig {% extends 'templates.master' %} {% block content %} {{ parent() ...
Read more

jdbc - Not able to establish database connection in eclipse -

i want make new database connection (db2) in eclipse purpose of using jpa. in jpa perspective, in data source explorer view, when try create new db connection, receive following logs when try ping server. org.eclipse.datatools.connectivity.exceptions.dbnotstartexception: no start database command issued. errorcode = -4499, sqlstate = 08001. @ org.eclipse.datatools.enablement.ibm.db2.internal.luw.jdbcluwjdbcconnection.getconnectexception(jdbcluwjdbcconnection.java:74) @ org.eclipse.datatools.connectivity.ui.pingjob.gettestconnectionexception(pingjob.java:81) @ org.eclipse.datatools.connectivity.ui.pingjob.run(pingjob.java:63) @ org.eclipse.core.internal.jobs.worker.run(worker.java:54) caused by: com.ibm.db2.jcc.am.ro: [jcc][t4][2043][11550][4.8.87] exception java.net.connectexception: error opening socket server example.example.com/51.37.93.117 on port 50,000 message: connection timed out: connect. errorcode=-4499, sqlstate=08001 @ com.ibm.db2.jcc.am.gd.a(gd.j...
Read more