Databases
StackOverflow2013
Postsdbo
POTrouble with making a sticky menu bar work in Chrome
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrouble with making a sticky menu bar work in Chrome
    primarykey
    data
    text
    <p>My aim is to have the menu bar stick at the top of the viewport once the header has been scrolled past.</p> <p>I have used this jQuery to achieve this and have used the following code to modify the css when the menu bar reaches the top:</p> <pre><code>jQuery(document).ready(function($){ // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#stickyMenu').offset().top; $(window).scroll(function(){ if( $(window).scrollTop() &gt; stickyHeaderTop ) { $('#stickyMenu').css({position: 'fixed', top: '0px'}); $('#stickyAlias').css('display', 'block'); } else { $('#stickyMenu').css({position: 'static', top: '0px'}); $('#stickyAlias').css('display', 'none'); } }); }); </code></pre> <p>Here is my dev page with my working example: <a href="http://dev.harryg.me/serge/home/" rel="nofollow">http://dev.harryg.me/serge/home/</a></p> <p>It works a dream in Firefox, but there is an issue with Chrome; the css change seems to kick in much earlier than it should - after only scrolling a few pixels down the menu bar becomes fixed and sticks to the top. I have a feeling the header image is to blame but cannot figure out why...</p> <p>EDIT: Thank you for all your suggestions. As I am away from my dev setup I will have to wait to reveiw all your suggestions. As Explosion Pills and Malk was saying, the issue is because the <code>stickyHeaderTop</code> is calculated before the header image is loaded. This is why it works once the image is cached, but not if you refresh the page. I will try Explosion Pills' solution(s) later and upvote/accept as required.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USharryg
    1. USharryg
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POTrouble with making a sticky menu bar work in Chrome
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POTrouble with making a sticky menu bar work in Chrome
      1. USharryg
      1. VTFavorite
    3. VO
      singulars
      1. POTrouble with making a sticky menu bar work in Chrome
      1. USPaul Syfrett
      1. VTFavorite
    1. COtry .position().top instead
      singulars
      1. POTrouble with making a sticky menu bar work in Chrome
      1. USPopnoodles
    2. COYour site is working fine for me in Chrome. Perhaps you already fixed it.
      singulars
      1. POTrouble with making a sticky menu bar work in Chrome
      1. USMalk
    3. CO@Malk You sure? doesn't work *properly* for me in Chrome either
      singulars
      1. POTrouble with making a sticky menu bar work in Chrome
      1. USMadbreaks
 

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