CODEWITHSUNDEEP
jquery
user1881482
user1881482

Reputation: 746

Is there a better way to address this jquery function

I have a site built with bootstrap and am trying to shrink the nav, resize the logo, and float the nav right from left, all while animating this in both directions as the user scrolls past 650px. Here is what I have, it seems cumbersome and lacking the simple elegance of most jquery functions. Also is there a better way to disable this function for window sizes smaller than 979px than what I have done.

.js

$(window).scroll(function() {
        var windowsize = $(window).width();
        if (windowsize > 979) {
            var sc = $(window).scrollTop()
            if (sc < 650) {
                $("#logoMain").addClass('logoLarge').removeClass('logoSmall')
                $("#mainNav").removeClass('pull-right')
                $(".navbar .nav").css("margin-top", "155px")
                $("body").css("padding-top", "155px")

            } else {
                $("#logoMain").addClass('logoSmall').removeClass('logoLarge')
                $("#mainNav").addClass('pull-right')
                $("#fixedbar").animate({
                    height : "=85px"
                }, 3000);
                $(".navbar .nav").css("margin-top", "35px")
                $("body").css("padding-top", "0px")

            }
        }
    });

.css

 .logoLarge {
width: 160px;
height: 160px;
margin-top: 16px;
}

.logoSmall {
width: 50px;
height: 50px;
margin-top: 16px;   
 }

 #logoMain, #fixedbar, #mainNav {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.html

<div class="navbar navbar-fixed-top">
        <div id="fixedbar" class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="brand" href="index.php"><img src="logo.jpg" id="logoMain" class="logoLarge"/></a>
                <div class="nav-collapse collapse">
                    <ul id="mainNav" class="nav navCustom menu">
                        <li class="active">
                            <a href="#about">About</a>
                        </li>

                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

Upvotes: 3

Views: 98

Answers (1)

Thumbz
Thumbz

Reputation: 347

You could put more of this in the css by having a div wrapper which then changes everything at once.

like so http://jsfiddle.net/Pfja2/

.wrapper1 #inside
{
    color: #FF0000;
}

.wrapper2 #inside
{
    color: #0000FF;
    font-weight: bold;
}

Basically, you just change the class of the wrapper, and each div inside has special settings based on that.

Upvotes: 1

Related Questions