Question

I’m new to HTML and CSS and I tried to create a floating side bar according to the instruction here. So I added these javascript codes into the html page:

<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>

The following codes to 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; }

And used the following codes to create the element:

<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>

But it just is not floating… Could anyone give me some hints?

Thanks.

Answer 1

After some error and try, even though I still don’t know the reasons, I think the codes above basically works, but just make sure that: 1. you load jquery successfully before the codes (people suggest loading jquery from both google ajax and a local fallback copy); 2. put the floating content in a long enough div for it to have some space to show that it floats 🙂