在wordpress的菜单上添加ScrollTop

时间:2018-01-15 10:53:51

标签: jquery css wordpress

我有一个带透明绝对菜单的免费主题, 我改变了css样式给定位置:固定,直到这里我们是,只有滚动到页面菜单保持透明,所以我希望它改变颜色然后背景:#FFF;

<div id="single-kt-header-area" class="navbar-fixed-top">
  <ul id="kt-navigation" class="fixed-nav" style="margin-top: 55px;">
    <li id="menu-item-293" class="menu-item"><a href="#">Home</a></li>
    <li id="menu-item-294" class="menu-item"><a href="#">About us</a></li>
    <li id="menu-item-295" class="menu-item"><a href="#">Contact</a></li>
  </ul>
</div>

CSS

    #single-kt-header-area{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        background:rgba(0,0,0,0.4);
        z-index:10000;
    }

#kt-logo-container {
    width: 299px;
}

#single-kt-header-area {
    background: rgba(16, 16, 16, 0);
}

.navbar-fixed-top.scrolling {
    background-color: #fff !important;
      position:fixed !important;
}

JS

$(document).ready(function() {
  $(window).scroll(function() { 
    var scroll = $(window).scrollTop();
     if (scroll >= 500) {
     $(".navbar-fixed-top").addClass("scrolling");
        } else {
     $(".navbar-fixed-top").removeClass("scrolling");
    }
  });
});

控制台日志上的OUTPUT站点

nav-fix.js:1 Uncaught ReferenceError: $ is not defined
    at nav-fix.js:1

抱歉我的英文

0 个答案:

没有答案