0

Most threads I see about shrinking the header when scrolling involves using jQuery animation or something similar. This makes it too obvious and instant, but I'm looking for something gradual:

http://www.kriesi.at/themes/enfold/

This is a good example of it and I'm trying to make something similar:

jQuery(document).ready(function($){
    var $myDiv = $('#logo img');
    var logoHeight = $myDiv.height;
    var stop = false;

    $(window).scroll(function() {
        logoHeight = $myDiv.height;
        var st = $(this).scrollTop();

        if(st >= 50 || logoHeight >= 97){
            stop = true;
        }

        if(!stop){
            $myDiv.height(st);
        }
    }).scroll();
});

Using this jQuery keeping track of scrolling. The problem it that it never stops or just doesn't show up at all. Is there a better method to achieve what I mean?

Howdy_McGee
  • 10,422
  • 29
  • 111
  • 186

1 Answers1

1

The way you are using stop, it can never become false again after you set it true.

Maybe something like:

var stop = (st >= 50 || logoHeight >= 97);

in place of the if and remove the line var stop = false; above.

Lee Meador
  • 12,829
  • 2
  • 36
  • 42
  • This works, :/ but only if I manually grab my scrollbar and bring it down, if I use my mouse wheel it doesn't seem to register. – Howdy_McGee Oct 16 '13 at 19:54
  • This page says the scroll event is fired no matter how the scroll is done: http://www.quirksmode.org/dom/events/scroll.html I don't know why it isn't happening for you. – Lee Meador Oct 17 '13 at 16:08