Databases
StackOverflow2013
Postsdbo
POUsing jQuery Sticky Navigation on Div After a Fixed Nav
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jQuery Sticky Navigation on Div After a Fixed Nav
    primarykey
    data
    text
    <p>I am trying to implement the following jquery sticky_navigation code on a div that is below a fixed nav (total height being 120px). My problem is the script works by changing the div's position to fixed after scrolling past it (ie the top of the page). However by the time the user scrolls to the top of the page, the div is being hidden by top fixed navigation and causing a non smooth / jumping experience. I would like it to be trigger once the "Get Help Now" section reaches the bottom of the nav. </p> <p>I would assume the fix would be something along the lines of changing the trigger point to be 120px below the scrollTop, but unfortunately i do not know how to code jquery and everything i have tried has failed. Any help would be greatly appreciated!</p> <p>Here is the jquery sticky_navigation code i am using and you can take a look at the staging site here, <a href="http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html" rel="nofollow">http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html</a></p> <pre><code> &lt;script&gt; $(function() { // grab the initial top offset of the navigation var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; // our function that decides weather the navigation bar should have "fixed" css position or not. var sticky_navigation = function(){ var scroll_top = $(window).scrollTop(); // our current vertical position from the top // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative if (scroll_top &gt; sticky_navigation_offset_top) { $('#sticky_navigation').css({ 'position': 'fixed', 'top':120, 'background':'#f0f0f0' }); }); } else { $('#sticky_navigation').css({ 'position': 'relative', 'top':0, 'background':'#fff' }); } }; // run our function on load sticky_navigation(); // and run it again every time you scroll $(window).scroll(function() { sticky_navigation(); }); }); &lt;/script&gt; </code></pre> <p>P.S. Please excuse any "protocol" errors, first time posting; long time reader.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSteven Jones
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POUsing jQuery Sticky Navigation on Div After a Fixed Nav
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POUsing jQuery Sticky Navigation on Div After a Fixed Nav
      1. USNick Tiberi
      1. VTFavorite
    1. COWhat if you change it to ( scroll_top > ( sticky_navigation_offset_top - 120 ) ) ?
      singulars
      1. POUsing jQuery Sticky Navigation on Div After a Fixed Nav
      1. USisotrope
    2. COPerfect! That was exactly what i was trying to do. Just didn't know the proper way of coding it. Thanks.
      singulars
      1. POUsing jQuery Sticky Navigation on Div After a Fixed Nav
      1. USSteven Jones
 

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