поплавок с jquery не плавающий

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 из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.