Databases
StackOverflow2013
Postsdbo
POMinor issues with scrolling nav bar
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMinor issues with scrolling nav bar
    primarykey
    data
    text
    <p>So I have some code here that is to snap a navigation bar to the top of the screen, and I have two minor issues with it.</p> <p>The first is that it does not work for IE9, and the second is that when scrolling via holding down a click on the scrollbar, when it reaches the point where the action is to occur, it snaps the scrollbar to the top of the screen and locks it until you unclick.</p> <pre><code>$(window).on('scroll', function() { if (!docked &amp;&amp; init &lt; body.scrollTop() ) { nav_menu.addClass('docked').css({ top: 0, position: 'fixed' }); docked = true; } else if (docked &amp;&amp; body.scrollTop() &lt;= init) { nav_menu.removeClass('docked').css({ position: 'absolute', top: init + 'px' }); docked = false; } }); </code></pre> <p>This is an adaptation of the code used on the <a href="http://lesscss.org" rel="nofollow">LESS</a> page for jQuery, so I'd guess that it has something to do with how jQuery handles the functions, but it has me curious.</p> <p>Edit: Here is the relevant HTML</p> <pre><code> &lt;header&gt; &lt;section id="top-picture"&gt;&lt;img alt="Logo" src="img/top.png" /&gt;&lt;/section&gt; &lt;nav id="nav-menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="artists.php"&gt;Artists&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="artwork.php"&gt;Artwork&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="music.php"&gt;Music&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="download.php"&gt;Download&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;!-- Social Media section Facebook Like button --&gt; &lt;li&gt;&lt;div class="fb-like" data-href="urlhere" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"&gt;&lt;/div&gt;&lt;/li&gt; &lt;!-- Tweet button --&gt; &lt;li&gt;&lt;a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="horizontal" data-url="urlhere" data-via="user" data-related="user" data-text="text"&gt;Tweet&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; </code></pre> <p>Here is the full relevant JS</p> <pre><code>jQuery(document).ready(function($){ var nav_menu = $('#nav-menu'); var body = $('body'); var init = nav_menu.position().top; var docked = false; $(window).on('scroll', function() { if (!docked &amp;&amp; init &lt; body.scrollTop() ) { nav_menu.addClass('docked').css({ top: 0, position: 'fixed' }); docked = true; } else if (docked &amp;&amp; body.scrollTop() &lt;= init) { nav_menu.removeClass('docked').css({ position: 'absolute', top: init + 'px' }); docked = false; } }); }); </code></pre> <p>And here is the relevant CSS, which uses LESS and Bootstrap:</p> <pre><code>@import "colors"; // importing preset color list @import "bootstrap"; @linkColor: lighten(@Maroon, 5%); /* Structure */ body { background: @Black; z-index: 1; } section#top-picture { img { display: block; margin-left: auto; margin-right: auto; } z-index: 300; } header { nav#nav-menu { background: @Black; position: absolute; top: 176px; width: 100%; border: 1px inset lighten(@Black, 30%); box-shadow: 0 0 15px 5px @White inset; -moz-box-shadow: 0 0 15px 0px @White inset; -webkit-box-shadow: 0 0 15px 0px @White inset; z-index: 500; ul { list-style-type: none; text-align: center; li { display: inline; } &amp;:first-child { padding-top: 1%; li { padding: 2.5%; a { .anchor-button; .btn-large; font-weight: bold; text-transform: uppercase; text-decoration: none; } } } &amp;:last-child { li { margin: 0 5%; } } } } } </code></pre> <p>There is a picture located above the navbar, which is at section#top-picture.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBahamutWC
    1. USBahamutWC
    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. POMinor issues with scrolling nav bar
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMinor issues with scrolling nav bar
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI think a little more info on the CSS and markup would be helpful to better troubleshoot it. However, have you tried to test init against window.scrollTop() instead of body.scrollTop? Also, have you already set the body variable to the body element? like var body = $('body'); somewhere above this code?
      singulars
      1. POMinor issues with scrolling nav bar
      1. USdavesters81
    2. COAdded! I have set body = $('body') before, and I did test init with window.scrollTop() to no avail. If the user scrolls with the arrows on the scrollbar or with a thumbwheel, the code executes as it is supposed to. It is these minor quirks I am curious about here.
      singulars
      1. POMinor issues with scrolling nav bar
      1. USBahamutWC
 

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