2013-07-01 45 views
0

我想創建一個側欄,從一定的偏移量開始滾動。我完全按照這個教程:http://www.htmldrive.net/items/show/253/Floating-HTML-Menu-Using-jQuery-and-CSSjquery浮動菜單不移動

問題是,我的邊欄根本不會退化。

任何人有任何想法,爲什麼我的邊欄不會讓步?

如果您需要其他代碼進行故障排除,請告訴我。但是,我的側邊欄代碼與教程中的完全相同。

謝謝!

+0

你可以創建一個http://jsfiddle.net與您的代碼。 – dreamweiver

回答

0

你確定你遵循了嗎?你有沒有包含相關的jQuery庫?你使用的是相同版本的jQuery?你的菜單是否有'floatMenu'的ID?必須有一些不同的東西。也許你可以發佈你的代碼,以便我們可以看到它?

+0

是的,我已經包含相關的jQuery庫,從演示文件確切的。而且我的菜單命名正確。 我的代碼很長,我怎麼把它貼在這裏?道歉,我第一次使用這個網站問一個問題! – user2539024

+0

剪下n貼或更好,但在http://jsfiddle.net/開始新的小提琴並張貼鏈接 – Moob

0

工作演示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; 
}