Databases
StackOverflow2013
Postsdbo
POfloating menu bar in containing div (js)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POfloating menu bar in containing div (js)
    text
    copied!<p>I have a JavaScript menu bar that is positioned on my webpage, then when the browser bar reaches the top of the menu it locks into a fixed position and moves with the window. However, i need to contain the menu within a div, how can this be done?</p> <p>This is my menu bar:</p> <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt; $(window).load(function(){ $(window).scroll(function(){ if ($(window).scrollTop() &gt;= 200) { $("#floatbar").css({position:'fixed',left:'0',top:'0'}); } else { $("#floatbar").css({position:'absolute',left:'0',top:'200px'}); } }); }); &lt;/script&gt; </code></pre> <p>and this is my html:</p> <pre><code>&lt;div id="menu_runner"&gt; &lt;div id="floatbar"&gt; &lt;a href="#issue49"&gt;Issue 49&lt;/a&gt;&lt;br /&gt; &lt;a href="#issue48"&gt;Issue 48&lt;/a&gt;&lt;br /&gt; &lt;a href="#issue47"&gt;Issue 47&lt;/a&gt;&lt;br /&gt; &lt;a href="#issue46"&gt;Issue 46&lt;/a&gt;&lt;br /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and my css:</p> <pre><code>#menu_runner { width: 100px; height: 2000px; float: right; position: relative; } #floatbar { width: 70px; position: absolute; top: 200px; } </code></pre> <p>where the menu runner is the containing div of the menu, and the floatbar obviously contains the menu which runs the JavaScript.</p> <p>However when I try this code, the menu sticks to the left and 200px from the top, and not within the menu_runner div. How can i make the floatbar be positioned in the menu_runner div and then scroll down with the JavaScript within the div as it should.</p> <p>Here's a live demo of my code: <a href="http://jsfiddle.net/f4dhy/" rel="nofollow">http://jsfiddle.net/f4dhy/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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