<div>
<a href="http://dev.magickitchen.com/fixed-sidebar/" rel="ugc">http://dev.magickitchen.com/fixed-sidebar/</a> requires a login.<br />
<br />
See this demo: <a href="https://davidwalsh.name/demo/scrolling-sidebar.php" rel="ugc">https://davidwalsh.name/demo/scrolling-sidebar.php</a>
</div>


<div>
Oh, damn, sorry, it's userid: &nbsp;pepe &nbsp; &nbsp; &nbsp; &nbsp; pass: &nbsp; &nbsp;BobTheBuilder45!! <br />
<br />
I'll have a look at that, thanks.
</div>


<div>
That scrollbar you sent is pretty bouncy, I'm not crazy about it.
</div>


<div>
It only updates when the scroll stops, I don't think you will find a smooth one.
</div>


<div>
Did you see this code in your demo?<br />
<br />

<pre><code class="code-10 nolinks" id="code-20-41375686-1"><span>$('#sidebar').affix({</span>
<span>  offset: {</span>
<span>    top: 235</span>
<span>  }</span>
<span>});</span>
<span></span>
<span>/* activate scrollspy menu */</span>
<span>var $body   = $(document.body);</span>
<span>var navHeight = $('.navbar').outerHeight(true) + 10;</span>
<span></span>
<span>$body.scrollspy({</span>
<span>	target: '#leftCol',</span>
<span>	offset: navHeight</span>
<span>});</span>
</code></pre>
<br />
That is what is handling the scrolling of the div that contains the &quot;menu&quot; add the sidebar id to your menu div and then add this code and see if that does the job for you.
</div>


<div>
Also, the one here is a lot smoother, watch the social icons scroll:<br />
<a href="http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/" rel="ugc">http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/</a><br />
<br />
I guess it has something to do with the easing used.
</div>


<div>
Thanks, Eddie! Awesome info, I really appreciate it!!
</div>


<div>
Hi, I liked the smoother scrolling option you gave me. <a href="http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/" rel="ugc">http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/</a><br />
<br />
Here: <a href="http://dev.magickitchen.com/faq.html" rel="ugc">http://dev.magickitchen.com/faq.html</a><br />
<br />
I looked at his source code and copied what he did. I added this to the head tag:<br />
<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery.min.js&quot;&gt;&lt;/<wbr />script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery.jscroll.mi<wbr />n.js&quot;&gt;&lt;/sc<wbr />ript&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$().ready(function() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var $scrollingDiv = $(&quot;#scrollingDiv&quot;);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(window).scroll(function(<wbr />){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scrollingDiv<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.stop()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.animate({&quot;marginTop&quot;: ($(window).scrollTop() + 30) + &quot;px&quot;}, &quot;slow&quot; ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;<br />
and removed the version of jquery I had previously linked to at the bottom of the page.<br />
<br />
And added &nbsp;id=&quot;scrollingDiv&quot; to the div around that left menu.<br />
<br />
But I don't see any change. Can you help?
</div>


<div>
I see in the console, this error:<br />

<pre><code class="code-1 nolinks" id="code-20-41378204-1"><span>$ is not defined</span>
</code></pre>
<br />
It happens on this line:
<pre><code class="code-1 nolinks" id="code-20-41378204-2"><span>$().ready(function() {</span>
</code></pre>
Even though you have jquery.min.js referenced above it.<br />
Also, you should make that 
<pre><code class="code-1 nolinks" id="code-20-41378204-3"><span>$(document).ready(function(){</span>
</code></pre>
</div>


<div>
Thanks, Eddie, I'll fix that.
</div>


<div>
Hi, I made it this, but maybe I didn't understand what was needed?<br />
<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery.min.js&quot;&gt;&lt;/<wbr />script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery.jscroll.mi<wbr />n.js&quot;&gt;&lt;/sc<wbr />ript&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function<wbr />(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var $scrollingDiv = $(&quot;#scrollingDiv&quot;);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(window).scroll(function(<wbr />){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scrollingDiv<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.stop()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.animate({&quot;marginTop&quot;: ($(window).scrollTop() + 30) + &quot;px&quot;}, &quot;slow&quot; ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
</div>


<div>
I'm bowing out as I can't figure it out. In your main_courses.html, you are getting errors that you should not be getting.
</div>


<div>
Thanks!! I do still need help on it. I'll try to make these changes today.
</div>


<div>
ok, , there are newer CSS that used to not be widely usable, but due to internet explorer version now mostly above 8, there is the CSS &nbsp; position: fixed; &nbsp; &nbsp;that can be used for window stationary elements, works for menus and navigation and help elements, &nbsp;but it is not something to be used on an element INSIDE of a HTML grid layout like yours. but if you take that menu out of the grid, you can add position: fixed; &nbsp; then just tack it on the left side, and it never changes position, (no scroll off). Can do wonders in phone view;
</div>


<div>
Hi, slick, <br />
<br />
I think I implemented your js right, but it isn't working. Could you take a look?<br />
<a href="http://dev2.magickitchen.com/faq.html" rel="ugc">http://dev2.magickitchen.com/faq.html</a><br />
<br />
user name: pepe, pw: BobTheBuilder45!!<br />
<br />
Thanks!
</div>


<div>
OK, you do not seem to know how javascript works, and for no reason I can see you have this IMPORTANT javascript for JQUERY at the very bottom of your page -<br />
&nbsp; &nbsp; &nbsp; &lt;script src=&quot;js/jquery-1.11.2.js&quot;&gt;<wbr />&lt;/script&gt;<br />
<br />
I don't have any time today to tell you how javascript works, but for Jquery javascript to work, you must always have the jquery &nbsp;JS loaded, BEFORE you try to use it, this is really basic code learning.<br />
<br />
You need to move both of these -<br />
&nbsp; &nbsp; &nbsp; &lt;script src=&quot;js/jquery-1.11.2.js&quot;&gt;<wbr />&lt;/script&gt;<br />
&nbsp; &nbsp; &nbsp; &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;<wbr />&lt;/script&gt;<br />
<br />
to the top of the page in the &lt;head&gt; section, a good place is under the bootstrap style load -<br />
<br />
&lt;!-- Bootstrap --&gt;<br />
&lt;link href=&quot;/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/bootstrap-theme<wbr />.css&quot;&gt;<br />
&lt;script src=&quot;js/jquery-1.11.2.js&quot;&gt;<wbr />&lt;/script&gt;<br />
&lt;script src=&quot;js/bootstrap.min.js&quot;&gt;<wbr />&lt;/script&gt;<br />
<br />
<br />
if you have a good reason for the jquery at the bottom of page, then at least move my &lt;script&gt; so it is below the -<br />
&lt;script src=&quot;js/jquery-1.11.2.js&quot;&gt;<wbr />&lt;/script&gt;
</div>


<div>
You're right, I really don't know anything about javascript. Thanks a lot, works now!
</div>


<div>
thanks for the points, if possible experiment with some newer, more effective MOBIL display, like the position: fixed; &nbsp; &nbsp;CSS, here an example I took from one my pages -<br />

<pre><code class="code-10 nolinks" id="code-20-41384335-1"><span>&lt;style&gt;</span>
<span>#leftIcon, #leftMenus {</span>
<span>  position: absolute;</span>
<span>  position: fixed;</span>
<span>  top: 0.8em;</span>
<span>  left 1px;</span>
<span>  padding: 5px;</span>
<span>  background:#fda;</span>
<span>  border: 2px solid #a84;</span>
<span>  border-top-right-radius: 1em;</span>
<span>  border-bottom-right-radius: 1em;</span>
<span>  }</span>
<span>  </span>
<span>#leftIcon {</span>
<span>  width: 2.2em;</span>
<span>  cursor: pointer;</span>
<span>  }</span>
<span>  </span>
<span>#leftIcon:hover {</span>
<span>  color: #fff;</span>
<span>  background:#446;</span>
<span>  }</span>
<span>  </span>
<span>#leftMenus {</span>
<span>  display: none;</span>
<span>  top: 2.8em;</span>
<span>  left 1px;</span>
<span>  }</span>
<span>&lt;/style&gt;</span>
<span>&lt;head&gt;</span>
<span>&lt;body&gt;</span>
<span>&lt;div id=&quot;leftIcon&quot; onclick=&quot;$('#leftMenus').toggle();&quot;&gt;menu&lt;/div&gt;</span>
<span>&lt;div id=&quot;leftMenus&quot;&gt;</span>
<span>links for menu&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;br /&gt;link&lt;/br&gt;</span>
<span>&lt;/div&gt;</span>
</code></pre>
This is a possible menu, navigation, or help that's NOT in a HTML grid system, as fixed to the left side.<br />
<br />
Merry Christmas !
</div>


<div>
Thanks, Slick! I'll do that, it sounds interesting. Merry Christmas to you and yours!
</div>


<div>
<div class="content wysiwyg-content">
HI, I'd like the left column on this website: <a href="http://www.magickitchen.com/menu/main_courses.html" rel="ugc">http://www.magickitchen.com/menu/main_courses.html</a><br />
<br />
to behave like this: <a href="http://dev.magickitchen.com/fixed-sidebar/" rel="ugc">http://dev.magickitchen.com/fixed-sidebar/</a><br />
<br />
Two questions:<br />
<br />
1. Is it possible, given my longer navigation and the fact that the left column ends further down the page?<br />
2. What might I change in the CSS and js to apply them to my page?<br />
<br />
Thanks for your advice.
</div>
</div>


HI, I'd like the left column on this website: http://www.magickitchen.com/menu/main_courses.html

to behave like this: http://dev.magickitchen.com/fixed-sidebar/

Two questions:

1. Is it possible, given my longer navigation and the fact that the left column ends further down the page?
2. What might I change in the CSS and js to apply them to my page?

Thanks for your advice.

Bootstrap fixed sidebar

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.

Web Development

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.