Question

저는 HTML과 CSS가 처음이에요. 지침에 따라 부동 사이드 바를 만들려고했습니다. CSS에

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

다음과 같은 코드 : 그래서 HTML 페이지에 이러한 자바 스크립트 코드를 추가

#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. 부동 소수점에 부동 소수점을 두어 부동 소수점을 표시하는 공간을 두십시오.

Answer 2

#shareboxfloat: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를 함께 스크롤합니다.