jquery on scroll change the menu bar height and logo

Question

how can I check if the user scrolls down? I have a menubar at the top of the page with a logo. And if the user scrolls down I want to resize or change the logo (smaller), change the height of the menu bar and make the position fixed.

Thanks

try using google ("jquery if user scrolls") and then click on first result: http://stackoverflow.com/questions/4627203/jquery-trigger-action-when-a-user-scrolls-past-a-certain-part-of-the-page — caramba, Dec 20 '13 at 14:03

score 0 · Answer 1 · answered Dec 20 '13 at 14:04

0

Try this

window.onscroll = function (e) {  //when window is scrolled
 //change image size and height of menu bar
}

answered Dec 20 '13 at 14:04

Nouphal.M

6,304
1
17
28

score 0 · Answer 2 · answered Dec 20 '13 at 14:08

0

Try this

$(window).on('scroll', function(e) {
    console.log(e);
}

answered Dec 20 '13 at 14:08

Gene Sy

1,325
2
10
17

Florin · Answer 3 · 2013-12-20T14:25:46.967

0

jsFiddle

$(window).on('scroll', function() {
    $('#navbar').css('position','fixed');
    $('#id').attr('width', '100px');
    $('#id2').css('font-size', '12px');
});

I updated the code now is fixed to top on scrol down.

edited Dec 20 '13 at 14:25

answered Dec 20 '13 at 14:10

Florin

5,781
2
20
30

jquery on scroll change the menu bar height and logo

3 Answers3