我在我的js中有这个脚本,滚动时我做了导航更改颜色,导航变成了白色。当我想要停用脚本
时,我会尝试响应$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.change-col-nav');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-inverse").css({
"background-color": "#fff",
"border-bottom": "1px solid #febe10",
"transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"
});
}
else
{
$('.navbar-inverse').css({
'background-color': 'transparent',
"border-bottom": "0",
});
}
});
}
});
我希望在最小宽度768最大宽度991时不活动此脚本,我该怎么做?
答案 0 :(得分:2)
将其包裹在if中,如下所示:
$(document).ready(function(){
// ... more code here
$(document).scroll(function() {
if ($(window).width() > 768 && $(window).width < 991) {
return;
}
// .... rest of your normal code here
})
})
答案 1 :(得分:0)
function myFunction() {
var scroll_start=0;
var startchange=$('.change-col-nav');
var offset=startchange.offset();
if (startchange.length) {
$(document).scroll(function() {
scroll_start=$(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-inverse").css( {
"background-color": "#fff", "border-bottom": "1px solid #febe10", "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"
}
);
}
else {
$('.navbar-inverse').css( {
'background-color': 'transparent', "border-bottom": "0",
}
);
}
}
);
}
}
$(document).ready(function() {
var windowWidth=$(window).width();
if(windowWidth < 768 || windowWidth > 991) {
myFunction();
}
});
$(window).resize(function() {
var windowWidth=$(window).width();
if(windowWidth < 768 || windowWidth > 991) {
myFunction();
}
});
答案 2 :(得分:0)
解决方案可以是window.innerWidth
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.change-col-nav');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
// BLOCK IF IN REQUESTED WIDTH
if(window.innerWidth >= 768 && window.innerWidth <= 991) {
return;
}
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-inverse").css({
"background-color": "#fff",
"border-bottom": "1px solid #febe10",
"transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"
});
}
else
{
$('.navbar-inverse').css({
'background-color': 'transparent',
"border-bottom": "0",
});
}
});
}
});
答案 3 :(得分:0)
我会使用媒体查询,而不是使用JavaScript检查宽度。
$(window).on("scroll", function () {
var offset=100;
$(document.body).toggleClass("scrolled-active", $(window).scrollTop() > offset);
});
&#13;
body {
padding-top: 50px;
}
.scrolled {
}
p {
margin-bottom: 50px;
}
#foo {
position: fixed;
top: 0;
left:0;
background-color: #CCC;
width: 100%;
}
media (min-width:768px) and (max-width:992px) {
.scrolled-active #foo {
background-color: #FCC;
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">Test</div>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
&#13;
如果你想用JavaScript做到这一点。我会使用window resize来检测浏览器的大小,而不是在每次滚动迭代时检查它。
var isWidthValid;
$(window).on("resize load", function() {
var width = $(window).width();
isValidWidth = width>=768 && width<=991;
$(window).trigger("scroll");
}).on("scroll", function(){
if(!isValidWidth) return;
/* Your code */
});