admin管理员组文章数量:1026989
Is there a way, using jQuery, to do different things based on how far the window has been scrolled?
This is the code I use right now;
$(document).scroll(function() {
// If scroll distance is 500px or greated
if ( $(document).scrollTop() >= 500 ) {
// Do something
} else {
// Go back to normal
}
});
What I want to do though is something like this ;
$(document).scroll(function() {
// If scroll distance is 500px or greater
if ( $(document).scrollTop() >= 500 ) {
// Do something
// If scroll distance is 1000px or greater
} else if ( $(document).scrollTop() >= 1000 ) {
// Do something else
} else {
// Go back to normal
}
});
I tried this, but it stopped the entire function from working. Am I going wrong somewhere?
Is there a way, using jQuery, to do different things based on how far the window has been scrolled?
This is the code I use right now;
$(document).scroll(function() {
// If scroll distance is 500px or greated
if ( $(document).scrollTop() >= 500 ) {
// Do something
} else {
// Go back to normal
}
});
What I want to do though is something like this ;
$(document).scroll(function() {
// If scroll distance is 500px or greater
if ( $(document).scrollTop() >= 500 ) {
// Do something
// If scroll distance is 1000px or greater
} else if ( $(document).scrollTop() >= 1000 ) {
// Do something else
} else {
// Go back to normal
}
});
I tried this, but it stopped the entire function from working. Am I going wrong somewhere?
Share Improve this question asked Aug 5, 2015 at 13:36 Dean ElliottDean Elliott 1891 gold badge5 silver badges12 bronze badges 4- 2 Well the first else if won't get hit since >=500 is also >= 1000, switch over the first two statements? – cloying Commented Aug 5, 2015 at 13:39
- In the case of over 1000, do you also want to do the over 500? – Kevin B Commented Aug 5, 2015 at 13:42
- @KevinB Basically at 500px I need an element to be given a fixed position. Then at 1000 I need it to switch to an absolute position. – Dean Elliott Commented Aug 5, 2015 at 13:49
- Use the solution suggested by "Strukt". You need to change the order of your if checks, greater to lower value. – Vipin Kohli Commented Aug 5, 2015 at 13:51
3 Answers
Reset to default 6Look : If Scroll is 1250px, it has been caught by >=500
!
Start testing with the highest value:1000px !
$(document).scroll(function() {
if ( $(document).scrollTop() >= 1000 ) {
} else if ( $(document).scrollTop() >= 500 ) {
} else {
}
});
EDIT1 It can be better to fix the scroll value you check, instead of calling it each if test a value that would have change . It's up to you, not absolutely needed:
$(document).scroll(function() {
var value=$(document).scrollTop();/* <== here*/
if ( value >= 1000 ) {
} else if ( value >= 500 ) {
} else {
}
});
EDIT2 Code beautiful ?
$(document).scroll(function() {
var value=$(document).scrollTop();
if ( value >= 1000 ) { /*do this*/; return;}
if ( value >= 500 ) { /*do this*/; return;}
if ( value >= 150 ) { /*do this*/; return;}
if ( value >= 30 ) { /*do this*/; return;}
/* else */
/*do this*/
});
EDIT2 Code configurable ?
var thresholds=[1000, 500, 150];
$(document).scroll(function() {
var value=$(document).scrollTop();
for(int i=0; i<thresholds.length; i++){
if (value >= thresholds[i]) {
/*do this*/; return;
}//end if
}//end for
/* else */
/*do this*/
});
A couple of things:
Reorder your conditions, starting with the highest number, or else the second condition will never be triggered. (If the scroll distance is 1001px, then it's greater than 500, and will trigger the first condition, thus bypassing the second because it's an
else if
)Cache the scroll value so you don't have to re-evaluate it in each conditional check:
$(document).scroll(function() {
var scrollDistance = $(document).scrollTop();
// If scroll distance is 500px or greater
if ( scrollDistance >= 1000 ) {
// Do something else
// If scroll distance is 1000px or greater
} else if ( scrollDistance >= 500 ) {
// Do something
} else {
// Go back to normal
}
});
$(document).scroll(function() {
$top = $(document).scrollTop();
// If scroll distance is 500px or greater
if ($top >= 500 && $top < 1000) {
// Do something
}
// If scroll distance is 1000px or greater
else if ($top >= 1000 && $top < 1500) {
// Do something else
} else {
// Go back to normal
}
});
Is there a way, using jQuery, to do different things based on how far the window has been scrolled?
This is the code I use right now;
$(document).scroll(function() {
// If scroll distance is 500px or greated
if ( $(document).scrollTop() >= 500 ) {
// Do something
} else {
// Go back to normal
}
});
What I want to do though is something like this ;
$(document).scroll(function() {
// If scroll distance is 500px or greater
if ( $(document).scrollTop() >= 500 ) {
// Do something
// If scroll distance is 1000px or greater
} else if ( $(document).scrollTop() >= 1000 ) {
// Do something else
} else {
// Go back to normal
}
});
I tried this, but it stopped the entire function from working. Am I going wrong somewhere?
Is there a way, using jQuery, to do different things based on how far the window has been scrolled?
This is the code I use right now;
$(document).scroll(function() {
// If scroll distance is 500px or greated
if ( $(document).scrollTop() >= 500 ) {
// Do something
} else {
// Go back to normal
}
});
What I want to do though is something like this ;
$(document).scroll(function() {
// If scroll distance is 500px or greater
if ( $(document).scrollTop() >= 500 ) {
// Do something
// If scroll distance is 1000px or greater
} else if ( $(document).scrollTop() >= 1000 ) {
// Do something else
} else {
// Go back to normal
}
});
I tried this, but it stopped the entire function from working. Am I going wrong somewhere?
Share Improve this question asked Aug 5, 2015 at 13:36 Dean ElliottDean Elliott 1891 gold badge5 silver badges12 bronze badges 4- 2 Well the first else if won't get hit since >=500 is also >= 1000, switch over the first two statements? – cloying Commented Aug 5, 2015 at 13:39
- In the case of over 1000, do you also want to do the over 500? – Kevin B Commented Aug 5, 2015 at 13:42
- @KevinB Basically at 500px I need an element to be given a fixed position. Then at 1000 I need it to switch to an absolute position. – Dean Elliott Commented Aug 5, 2015 at 13:49
- Use the solution suggested by "Strukt". You need to change the order of your if checks, greater to lower value. – Vipin Kohli Commented Aug 5, 2015 at 13:51
3 Answers
Reset to default 6Look : If Scroll is 1250px, it has been caught by >=500
!
Start testing with the highest value:1000px !
$(document).scroll(function() {
if ( $(document).scrollTop() >= 1000 ) {
} else if ( $(document).scrollTop() >= 500 ) {
} else {
}
});
EDIT1 It can be better to fix the scroll value you check, instead of calling it each if test a value that would have change . It's up to you, not absolutely needed:
$(document).scroll(function() {
var value=$(document).scrollTop();/* <== here*/
if ( value >= 1000 ) {
} else if ( value >= 500 ) {
} else {
}
});
EDIT2 Code beautiful ?
$(document).scroll(function() {
var value=$(document).scrollTop();
if ( value >= 1000 ) { /*do this*/; return;}
if ( value >= 500 ) { /*do this*/; return;}
if ( value >= 150 ) { /*do this*/; return;}
if ( value >= 30 ) { /*do this*/; return;}
/* else */
/*do this*/
});
EDIT2 Code configurable ?
var thresholds=[1000, 500, 150];
$(document).scroll(function() {
var value=$(document).scrollTop();
for(int i=0; i<thresholds.length; i++){
if (value >= thresholds[i]) {
/*do this*/; return;
}//end if
}//end for
/* else */
/*do this*/
});
A couple of things:
Reorder your conditions, starting with the highest number, or else the second condition will never be triggered. (If the scroll distance is 1001px, then it's greater than 500, and will trigger the first condition, thus bypassing the second because it's an
else if
)Cache the scroll value so you don't have to re-evaluate it in each conditional check:
$(document).scroll(function() {
var scrollDistance = $(document).scrollTop();
// If scroll distance is 500px or greater
if ( scrollDistance >= 1000 ) {
// Do something else
// If scroll distance is 1000px or greater
} else if ( scrollDistance >= 500 ) {
// Do something
} else {
// Go back to normal
}
});
$(document).scroll(function() {
$top = $(document).scrollTop();
// If scroll distance is 500px or greater
if ($top >= 500 && $top < 1000) {
// Do something
}
// If scroll distance is 1000px or greater
else if ($top >= 1000 && $top < 1500) {
// Do something else
} else {
// Go back to normal
}
});
本文标签:
版权声明:本文标题:javascript - jQuery, if window has scrolled X pixels do this, else if has scrolled XX pixels do something else - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1744545975a2102913.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论