Jquery Floating Menu does not move

Question

I am trying to create a sidebar that starts scrolling from a certain offset. I followed this tutorial exactly: http://www.htmldrive.net/items/show/253/Floating-HTML-Menu-Using-jQuery-and-CSS

Problem is, my sidebar will not budge at all.

Anyone has any idea on why my sidebar will not budge?

Do let me know if you need my other codes to troubleshoot. However, my code for the sidebar is exactly the same as the one in the tutorial.

Thank you!

Can you create a http://jsfiddle.net with your code. – dreamweiver Jul 01 '13 at 12:58 — dreamweiver, Jul 01 '13 at 12:58

Moob · Answer 1 · 2013-07-01T13:31:37.603

0

Are you sure you followed it EXACTLY? Have you included the relevant jQuery libraries? Are you using the same version of jQuery? Does your menu have the id of 'floatMenu'? There must be something different. Perhaps you can post your code so we can see it?

edited Jul 01 '13 at 13:31

answered Jul 01 '13 at 12:56

Moob

14,420
1
34
47

Yes i have included the relevant jQuery libraries, the exact ones from the demo file. And my menu is named correctly. My code is quite long, how do i post it on here? Apologies, my first time using this site to ask a question! – user2539024 Jul 01 '13 at 13:01
Cut n paste or better yet start a new fiddle at http://jsfiddle.net/ and post the link – Moob Jul 01 '13 at 13:29

score 0 · Answer 2 · answered Jul 01 '13 at 13:46

Working DEMO http://jsfiddle.net/yeyene/7G4sS/

JQUERY

var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
    $(window).scroll(function () {
        var offset = menuYloc+$(document).scrollTop()+"px";
        $(name).animate({top:offset},{duration:500,queue:false});
    });
});

HTML

<div id="floatMenu" style="top: 150px;">
  <ul class="menu1">
    <li><a href="#" onclick="return false;"> Home </a></li>
  </ul>
  <ul class="menu2">
    <li><a href="#" onclick="return false;"> Table of content </a></li>
    <li><a href="#" onclick="return false;"> Exam </a></li>
    <li><a href="#" onclick="return false;"> Wiki </a></li>
  </ul>
  <ul class="menu3">
    <li><a href="#" onclick="return false;"> Technical support </a></li>
  </ul>
</div>

CSS

body {
    background-color:#000;
    width:100%;
    height:2000px;
    color:#ccc;
    font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}
#floatMenu {
    position:absolute;
    top:150px;
    right:10px;    
    width:200px;
}
#floatMenu ul {
    margin-bottom:20px;
}
#floatMenu ul li{
    list-style:none;
}
#floatMenu ul li a {
    display:block;
    border:1px solid #999;
    background-color:#222;
    border-left:6px solid #999;
    text-decoration:none;
    color:#ccc;
    padding:5px 5px 5px 25px;
}
#floatMenu ul.menu1 li a:hover {
    border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
    border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
    border-color:#f09;
}

Jquery Floating Menu does not move

2 Answers2

JQUERY

HTML

CSS