我有一个页面,您可以单击该页面以从页面顶部向下滑动元素。
我正在尝试创建一个规则,规定如果下推可见并且屏幕滚动的距离超过下推的高度,则应再次隐藏它。这意味着用户必须按下按钮才能使其再次显示。
在我的 HTML 中,我有:
<div class="row" id="learn-more" style="display:none">
<div class="small-12 columns" id="close">
<p id="close-learn">
<i class="fa fa-times pull-right fa-2x"></i>
</p>
</div>
<div class="small-12 columns" id="learn-content">
<h1>Content for Pushdown</h1>
</div>
</div>
<div class="row" id="hero">
<div class="small-12 columns small-centered">
<p id="learn"><a class="transition">Learn More</a></p>
</div>
</div>
在我的 Javascript 中,我有:
// Open and close learn more section
$("#learn").on("click", function() {
$("#learn-more").slideDown();
});
$("#close-learn").on("click", function() {
$("#learn-more").slideUp();
});
// Close learn-more based on scroll position
$(window).on("scroll", function() {
var scrollPosition = $(window).scrollTop();
if ($("#learn-more").is(":visible") && scrollPosition > $("#learn-more").height()) {
$("#learn-more").slideUp()
}
});
这一切都有效,但是当 #learn-more 元素向上滑动时,页面会向下跳转大约 500 像素,这是 #learn-more 元素的高度。我希望我的工作方式与 Airbnb's new homepage 相同当您单击“工作原理”按钮,然后滚动到下推元素下方时。
如有任何建议,我们将不胜感激。
最佳答案
似乎出现这种情况是因为调用slideUp()后$(window).scrollTop位置被保留。 但是我们可以记住“了解更多”按钮相对于窗口顶部的可见位置,并在隐藏文本 block 后返回到该位置。另外,我建议在这里使用 hide() 而不是 slipUp()。
这是我建议在滚动时执行的操作:
$(window).on("scroll", function(event) {
var scrollPosition = $(window).scrollTop();
var learnMore = $("#learn-more");
if (learnMore.is(":visible") && scrollPosition > learnMore.height()) {
var learnMoreButtonTop = $("#learn").offset().top - scrollPosition;
learnMore.hide();
$(window).scrollTop(learnMoreButtonTop);
}
});
关于Javascript 阻止滚动跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25019884/