CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jgb
jgb

Reputation: 231

How to reset scrollTop() div positioning when scrolling back up?

I have a fixed nav and I'm changing the size of the logo at 155px scroll height and changing the positioning of the li's. Everything is working perfectly but it doesn't reset when I scroll back up. Do I need to make a greater than function for that? Any suggestions welcome, thanks :)

Here's the jquery:

$(document).scroll(function(){
            if ($(this).scrollTop()>155){
                $('.logo-nav').stop().animate({ height: 70 },20);
            } else {
                $(".menu li").addClass("nav-scroll");
                $('.logo-nav').stop().animate({ height: 145 },20);
            }
        });

Here's the css:

li {
    display: inline-block;
    margin: 0;
    position: relative;
    top: 45px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.nav-scroll {
    top: auto;
}

Upvotes: 0

Views: 1130

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Use $(window) rather than $(document):

$(window).scroll(function() {
    if ($(this).scrollTop() > 155){
        $('.logo-nav').stop().animate({ height: 70 },20);
    } else {
        $(".menu li").addClass("nav-scroll");
        $('.logo-nav').stop().animate({ height: 145 },20);
    }
});

And make sure you enclose it within $(document).ready() function.

Upvotes: 4

Related Questions