플로팅/호버 Blogger에서 PageList에

Question

Blogger의 부동/호버링 페이지 목록 (탐색 메뉴 바)에 대한 HTML/CSS를 작성하거나 아는 방법을 아는 사람이 있습니까? 여기에 보이는 것처럼 : http://www.fabulousK.com & http://apairandasparediy.com/. 난 그냥 사용자가 내 사이트에서 스크롤 다운 때 표시 싶어요. 이 코드를 사용하면 PageList의 텍스트를 편집하는 데 도움이되는 경우이 코드를 사용하고 있습니다.

.PageList {text-align:center !important; 
text-transform:uppercase; 
border-top: solid black 1px; 
border-bottom: solid black 1px; 
letter-spacing:2px} .PageList li 
{display:inline !important; float:none !important;} 

Answer 1

나는 이것을위한 지침서를 읽었습니다. jQuery를 사용하여 수행 할 수 있습니다.

는 당신은 아마 당신의 PageList의 ID를 가질 필요가 모든

먼저 #의 PageList1 될거야

그럼 그냥 당신이 일반적으로 추가 할 것입니다 스타일과 다음

사용, 다른 CSS를 추가를 추가 클래스 끈적.

그래서 두 번째 예제의 경우 이것은 아마도 같은 것을 보일 것이다 : (

.sticky{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: white; 
} 

그런 다음 (위젯에 최선의, 그리고 블로그의 하단에 넣어) 다음과 같은 스크립트를 추가를하면 경우 이미 첫 번째 라인을 추가 할 필요가 없습니다, JQuery와 프레임 워크를 가지고있다.

은 무엇이 scipt가하는 것은 당신이 아래로 스크롤로 정상에 충실 할 수 있도록, 당신에게 끈적이 pagelist 클래스를 추가 할 수 있습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script type='text/javascript'> 
//<![CDATA[ 
    $(window).scroll(function(){ 
    var offset = 0; 
    var sticky = false; 
    var top = $(window).scrollTop(); 

    if ($("aside").offset().top < top) { 
    $("#PageList1").addClass("sticky"); 
    sticky = true; 
    } else { 
    $("#PageList1").removeClass("sticky"); 
    } 
}); 
//]]> 
</script> 

을