使用滚动显示/隐藏div [英] Show/Hide div with scroll
问题描述
我知道标题不是最具描述性的,并且有类似问题的更多主题,但我找不到任何答案。事实上,我得到了这很感谢你们这样,这是我想做的。
I know the title isn't the most descriptive and there are many more topics with similar questions like this, but I couldn't find any answers. In fact, I got this far thanks to you guys so, here's what I'm trying to do.
我有一个DIV,当页面是滚动到某个位置(触发器),标记为 #othdiv 。当您向下滚动到标记为#othdiv2 的下一个位置(触发器)时,此DIV消失。
I have a DIV that I want to show when the page is scrolled to a certain position (trigger), marked by #othdiv. This DIV disappears when you scroll further down to the next position (trigger) marked as #othdiv2.
这是一个非常简单的解决方案但我只是不能弄清楚。我尝试了条件if语句,重复代码,删除行,新变量...叹息...请帮助。
This feels like it's a very simple solution but I just can't figure it out. I have tried conditional if statements, duplicating codes, removing lines, new variables... sigh... please help.
$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
var topOfOthDiv2 = $("#othdiv2").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
}
else
if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
$("#dvid").hide(); //reached the desired point -- show div
}
});
});
当前代码示例:
http://jsfiddle.net/DnJ2z/124/
底线:
I尝试做类似这样的事情: http://mailchimp.com/2012/ (注意标题[应用程式,支援,操作等])
Bottom line: I'm trying to do something similar to this: http://mailchimp.com/2012/ (notice the titles [the app, support, operations, etc])
推荐答案
尝试使用&& code>如:if(this and that){do something} else {do not}
Try using &&
as in: if (this and that){do something} else{don't}
Working Example
$(document).ready(function () {
var topOfOthDiv = $("#othdiv").offset().top;
var topOfOthDiv2 = $("#othdiv2").offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > topOfOthDiv && $(window).scrollTop() < topOfOthDiv2) {
$("#dvid").show();
} else {
$("#dvid").hide();
}
});
});
有关逻辑运算符的更好解释,请参阅:逻辑运算符MDN
For a much better explanation of logical operators check out: Logical Operators MDN
这篇关于使用滚动显示/隐藏div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!