Databases
StackOverflow2013
Postsdbo
POFixing a menu in one direction in jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixing a menu in one direction in jquery
    primarykey
    data
    text
    <p>I have a "fixed" menu bar on the left side of a website that I want to follow the scrollbar down the page when the user scrolls. I've tried two approaches so far, one css, and one jquery:</p> <p>1) My first attempt was to use css style fixing:</p> <pre><code>#leftframe { position:fixed; width: 200; } </code></pre> <p>Normally, this works great on vertical scrolling. The problem with this solution is that when the window isn't very wide, and the user tries to scroll, it goes right over the page contents.</p> <p>2) After some research, I found that there's a jquery approach that allows you to fix an element in one direction, as described on stack overflow here: <a href="https://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y">CSS: fixed position on x-axis but not y?</a></p> <p>Using the approach outlined there, I wrote this nice little function to do it for me:</p> <pre><code>function float_vertical_scroll(id) { $(window).scroll(function(){ $(id).css({ 'top': $(this).scrollTop() //Use it later }); }); } </code></pre> <p>Only, now the problem is, I've tried this in Chrome and Safari, and both show a noticeable flicker of the menu bar during vertical scrolling. The menu moves in a very "choppy" fashion, where the css solution smoothly slid it down the page.</p> <p>Does anyone know why the jquery solution is so choppy, and if anything can be done about it? Is there some third solution that will give me the "best of both worlds"?</p> <p>Thanks everyone.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USjsarma
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFixing a menu in one direction in jquery
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POFixing a menu in one direction in jquery
      1. USsai
      1. VTFavorite
    3. VO
      singulars
      1. POFixing a menu in one direction in jquery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe jQuery solution is choppy because you scroll faster than JavaScript can update the element. The CSS solution is done by the browser and saves time by bypassing the JS entirely.
      singulars
      1. POFixing a menu in one direction in jquery
      1. USBlazemonger
    2. COTrue. I guess css needs to be updated to have fixed in one direction.
      singulars
      1. POFixing a menu in one direction in jquery
      1. USjsarma
    3. COYou could use [this question's answers](http://stackoverflow.com/q/14035083/901048) and have the element moved only when scrolling stops, instead of whenever scrolling happens.
      singulars
      1. POFixing a menu in one direction in jquery
      1. USBlazemonger
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload