Question

我正在将一些JavaScript和jQuery挂钩到这个WordPress，但我需要最后10％的帮助。我已将脚本附加到导航栏，以便通过滚动更改颜色。向下滚动时，导航栏背景变为白色，带有黑色字体和方框阴影。然后向上滚动时，导航栏背景变为透明，字体颜色变为白色，框阴影消失。问题是最后一部分没有发生。当我向上滚动时，白色背景仍然存在。

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

Answer 1

我编辑了你的代码。你所要做的就是在开始时整合变化。您的问题是您将scroll_start从0设置为另一个值。

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

我已经在网站上测试了您的代码并且它有效，但您需要添加的功能除外。

来源：How can I determine the direction of a jQuery scroll event?

麻烦钩住一些jquery wordpress

1 个答案: