Geek asks and answers

Does navigation disappear after scrolling down?

I would like to get navigation just like this site: http://www.interviewmagazine.com/

A navigation bar will appear after scrolling about 700 pixels or so. Its fixed navigator has a fading effect and has a fading effect when scrolling back.

I tried to see how they made their code, but I could not understand.

sounds like mootools tho?

If anyone can help, this will be awesome. thank!

+3
source share
4 answers

You can create such a menu using jQuery and CSS, replacing classes as needed when:

var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
    //do something;
}

CSS: position : fixed, opacity : 0, height : 0; overflow : hidden

swap class to change height to a fixed amount

animate({opacity : 1.0}, 'fast', function() {
    //callback;
});

, . , - jQuery , , .

EDIT: .

http://jsfiddle.net/lazerblade01/fNn7K/26/

+2

, stackoverflow, :

$(function(){
    // Check the initial Poistion of  Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyheader').css('opacity', '1');
            } else {
                    $('#stickyheader').css({position: 'static', top: '600px'});
                    $('#stickyheader').css('opacity', '0');
            }
    }); 
 });

Fiddle DEMO http://jsfiddle.net/uFq2k/297/

: div

+2

, ScrollSpy - -- - .

.

walsh , .

http://davidwalsh.name/mootools-scrollspy

+1
source

You can try Twitter Bootstrap . Check your second toolbar.

0
source

More articles:


All Articles