为什么jquery isVisible不能与滚动功能一起使用 [英] why jquery isVisible does not work along with scroll function
本文介绍了为什么jquery isVisible不能与滚动功能一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码如下所示；
$(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 && refElement.position().top + refElement.height() > 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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="../test/css/index.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="q-nav">
<ul>
<li><a class="active q-nav-about " id="is-visible" href="#about-us">ABOUT US</a>
</li>
<li><a class="q-nav-work" href="#work">WORK</a>
</li>
<li><a class="q-nav-contact" href="#contact-us">CONTACT US</a>
</li>
</li>
</ul>
</div>
</body>
为此，我正在关注此示例.现在一切正常.但是我想做的是，当用户向下滚动时，导航菜单的颜色应该发生变化.当用户滚动回到第一页时，导航菜单将自动变为透明.为此，我正在使用isVisible函数，但是以某种方式无法检测到何时可见 active ?所以我还有其他方法可以知道吗?
For this , I am following this example. Now everything works fine. But what I want to do is when user scroll down, the color of nav menu should change,which is happening. and when the user scrolls back to the first page automatically the nav menu should become transparent. For that I am using isVisible function, but somehow it is not able to detect when active is visble? so is there any other way through which I can know that?
推荐答案
这是工作示例-
here is working example -
$(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}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
这篇关于为什么jquery isVisible不能与滚动功能一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
