trouble hooking in some jquery wordpress

Question

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');
            }
        });
    }
});

Pro tip #1: you don't need to put jQuery into `noConflict` mode yourself, it already is. And, if you use a `no-conflict safe` document ready, you can use `$` inside without the `$j` like you have done. Example: `jQuery(function($) { // $ is safe to use in here... });` (instead of `$j(document).ready(function() {....});` — random_user_name, Dec 06 '17 at 17:25
Pro tip #2: You can assign multiple CSS properties at the same time, using `object notatation`: `$('.navbar-default').css({background: 'white', 'box-shadow': '0 2px 0 0 #000'})` — random_user_name, Dec 06 '17 at 17:26

score 2 · Accepted Answer · answered Dec 06 '17 at 16:28

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?

trouble hooking in some jquery wordpress

1 Answers1