为什么jquery isVisible与滚动function不兼容
我的代码如下所示;
$(document).ready(function() { var scroll_start = 0; var startchange = $('.q-intro-text'); var offset = startchange.offset(); $(document).scroll(function() { scroll_start = $(this).scrollTop(); if (scroll_start > offset.top) { $('#q-nav').css('background-color', 'black'); } else { $('#q-nav').css('background-color', 'transparent'); } }); $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function(e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function() { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top + 2 }, 500, 'swing', function() { window.location.hash = target; $(document).on("scroll", onScroll); var scroll_start = 0; var startchange = $('.q-intro-text'); var offset = startchange.offset(); $(document).scroll(function() { scroll_start = $(this).scrollTop(); if (scroll_start > offset.top) { $('#q-nav').css('background-color', 'black'); } else { $('#q-nav').css('background-color', 'transparent'); } }); }); }); }); function onScroll(event) { var scrollPos = $(document).scrollTop(); $('#q-nav a').each(function() { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top scrollPos) { $('#q-nav ul li a').removeClass("active"); currLink.addClass("active"); // $('#q-nav').css('background-color', 'red'); } else { currLink.removeClass("active"); // $('#q-nav').css('background-color', 'transperant'); } }); } #q-nav { width: 100%; height: 8rem; position: fixed; top: 0; padding-top: 3rem; } #q-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } #q-nav .q-nav-about { position: relative; color: #ffffff; text-decoration: none; font-weight: bold; padding: 0rem 2rem 0 2rem; } #q-nav ul li { list-style: none; } #q-nav .q-nav-work { position: relative; color: #ffffff; text-decoration: none; font-weight: bold; padding: 0rem 2rem 0 2rem; } #q-nav .q-nav-contact { position: relative; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0rem 8rem 0 2rem; }
为此，我遵循这个例子 。 现在一切正常。 但我想要做的是当用户向下滚动时，导航菜单的颜色应该改变，这正在发生。 当用户自动滚动回第一页时，导航菜单应该变得透明。 为此，我使用isVisible函数，但不知何故，它无法检测何时活动是否可见？ 那么我还有其他方式可以知道吗？
这是工作示例 –
$(document).ready(function () { $(".menu").addClass("changeBg"); $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); var id = $("#menu-center a:first").attr('href'); if(target == id){ $(".menu").addClass("changeBg"); } else{ $(".menu").removeClass("changeBg"); } $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ if ($('#menu-center a:first').hasClass('active')) { $(".menu").addClass("changeBg"); } else{ $(".menu").removeClass("changeBg"); } var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); var id = $("#menu-center a:first").attr('href'); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }
body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .menu { width: 100%; height: 75px; background-color:#000; position: fixed; background-color:#000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #menu-center { width: 980px; height: 75px; margin: 0 auto; } #menu-center ul { margin: 15px 0 0 0; } #menu-center ul li { list-style: none; margin: 0 30px 0 0; display: inline; } .active { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; } #home { background-color: grey; height: 100%; width: 100%; overflow: hidden; background-image: url(images/home-bg2.png); } #portfolio { background-image: url(images/portfolio-bg.png); height: 100%; width: 100%; } #about { background-color: blue; height: 100%; width: 100%; } #contact { background-color: red; height: 100%; width: 100%; } .changeBg{background:rgba(0, 0, 0, 0.22);} .changeBg a{color:#000}
var query = $('.active');
你需要使用一个. 在active之前，因为它是一个类名。