Question

我是新來的HTML和CSS，我試圖創建一個浮動邊欄根據這裏的指示。所以我加了這些JavaScript代碼到HTML頁面：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
    var $sidebar   = $("#sharebox"), 
    $window    = $(window), 
    offset     = $sidebar.offset(), 
    topPadding = 5; 

    $window.scroll(function() { 
    if ($window.scrollTop() > (offset.top-topPadding)) { 
     $sidebar.stop().animate({ 
     marginTop: $window.scrollTop() - offset.top + topPadding 
     }); 
    } else { 
     $sidebar.stop().animate({ 
     marginTop: 0 
     }); 
    } 
    }); 
}); 
</script> 

以下代碼到CSS：

#sharebox  { float: right; margin-left: 800px; background: #FAFAFA; 
        position: absolute; border: 1px solid #E5E5E5; 
        -moz-border-radius: 3px;border-radius: 3px; } 
#sharebox .wdt { float: right; clear: left; padding: 5px; } 

並用以下代碼來創建元素：

<div id="sharebox"> 
<ul> 
    <li><a href="#Search" onclick="return false;"> Search </a></li> 
    <li><a href="#Plots" onclick="return false;"> Plots </a></li> 
    <li><a href="#Statistics" onclick="return false;"> statistics </a></li> 
</ul> 
</div> 

但只是不漂浮......任何人都可以給我一些提示？

謝謝。

Answer 1

經過一些錯誤和嘗試，即使我仍然不知道原因，我認爲上面的代碼基本上可以工作，但只要確保：1.在代碼之前成功加載jquery（人們建議從jquery加載jquery google ajax和本地備用副本）; 2.將浮動內容放在足夠長的div中，以便有足夠的空間顯示浮動內容:)

Answer 2

在#sharebox您的float:right和position:absolute是衝突的。如果你想讓它浮動，刪除的位置是：絕對的，像這樣：

#sharebox { 
    float: right; 
    margin-left: 800px; 
    background: #FAFAFA; 
    border: 1px solid #E5E5E5; 
    -webkit-border-radius: 3px; /* gets older safari browsers */ 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

當我測試了這一點，它完全浮動的權利，並上下滑動與jQuery的滾動。