jQuery에서 스크롤 한 후 상단 툴바

Question

Magento 관리 저장소에서이 툴바를 보았습니다. 페이지가 아래로 스크롤되고 메뉴가 사라진 후에 위의 관리 패널에서와 같이 투명한 배경과 함께 상단 툴바가 표시되도록합니다.

Answer 1

html로 :

<div class="auto-style1"> 
    <a href="#top" id="top-link">Top of Page</a> 
</div> 

CSS의 :

.auto-style1 { text-align: right;} 

자바 스크립트 :

jQuery.fn.topLink = function(settings) 
{ 
    settings = jQuery.extend({ 
    min: 1, 
    fadeSpeed: 200 
    }, settings); 
    return this.each(function() { 
    //listen for scroll 
    var el = $(this); 
    el.hide(); //in case the user forgot 
    $(window).scroll(function() { 
     if($(window).scrollTop() >= settings.min) 
     { 
     el.fadeIn(settings.fadeSpeed); 
     } 
     else 
     { 
     el.fadeOut(settings.fadeSpeed); 
     } 
    }); 
    }); 
}; 
//usage w/ smoothscroll 
$(document).ready(function() { 
    //set the link 
    $('#top-link').topLink({ 
    min: 400, 
    fadeSpeed: 500 
    }); 
    //smoothscroll 
    $('#top-link').click(function(e) { 
    e.preventDefault(); 
    $.scrollTo(0,300); 
    }); 
});