Q:

trouble hooking in some jquery wordpress

I'm in the process of hooking in some JavaScript and jQuery to this WordPress but I need help with the last 10%. I've attached a script to the navbar so that it changes color with the scroll. when you scroll down, the navbar background turns white with black font and a box shadow. Then when you scroll up, the navbar background turns transparent, the font changes color to white and the box shadow disappears. The problem is that last part isn't happening. When I scroll up, the white background remains. 
here's the jQuery:
var $j = jQuery.noConflict();

$j(document).ready(function(){
    var scroll_start = 0;
    var startchange = $j('.banner'); //this is where the transition starts. it starts at the banner
    var offset = startchange.offset();
    if (startchange.length){

        $j(document).scroll(function(){
            scroll_start = $j(this).scrollTop();
            if(scroll_start > offset.top) {
                $j(".navbar-default").css('background', 'white'); //this is the changing color
                $j(".navbar-brand").css('color', 'black'); //this is the changing font color
                $j(".navbar-dilly").css('color', 'black'); //this is the right side font color
                $j(".navbar-default").css('box-shadow', '0 2px 0 0 #000');
            } else {
                $j(".navbar-default").css('background', 'transparent'); // this is the starting color
                $j(".navbar-brand").css('color', 'white'); // this is the starting font color
                $j(".navbar-dilly").css('color', 'white'); // this is the right side font color
                $j(".navbar-default").css('box-shadow', 'none');
            }
        });
    }
});

A:

I edited your code a little bit. All you've got to do is integrate the change in start. You issue was that you were setting scroll_start from 0 to another value.
var lastScrollTop = 0;
$j(window).scroll(function(event) {
    var st = $j(this).scrollTop();
    if (st > lastScrollTop) {
        $j(".navbar-default").css('background', 'white'); //this is the changing color
        $j(".navbar-brand").css('color', 'black'); //this is the changing font color
        $j(".navbar-dilly").css('color', 'black'); //this is the right side font color
        $j(".navbar-default").css('box-shadow', '0 2px 0 0 #000');
    } else {
        $j(".navbar-default").css('background', 'transparent'); // this is the starting color
        $j(".navbar-brand").css('color', 'white'); // this is the starting font color
        $j(".navbar-dilly").css('color', 'white'); // this is the right side font color
        $j(".navbar-default").css('box-shadow', 'none');
    }
    lastScrollTop = st;
});

I have tested your code on the website and it works, except for the feature which you need to add in.
Source : How can I determine the direction of a jQuery scroll event?

