我有一个单页网站，其中有两个 div 模块，单击时会展开。
第一个位于顶部的 Hero 部分，当前代码可以按需要工作。第二个位于页面下方的另一部分。目前，一旦滚动发生，第二个模块就会关闭。
我需要做的是在单击 div 时获取文档滚动坐标。然后，一旦用户向上或向下滚动 200px，div 就会重新关闭。无论它(div)位于网站的哪个位置。
我在这里和其他地方找到的所有问题仅涉及设置相对于页面加载时窗口位置的滚动容差。但对我来说这不是什么坏事。该站点是响应式的，并且当它改变 div 的初始位置时，其将/可能是未知的。我需要某种方式在单击 div 时动态存储视口(viewport)滚动位置，然后分配 200px 容差。
我希望这是有道理的。我已经这样做了大约 12 个多小时。 SOS :)
这是Fiddle
如果您不想使用Fiddle，这是必要的代码
HTML:
<body>
<section id="hero">
<div>
<div class="module-cta hero-cta">
<a class="module-cta__button"><!-- Fallback location -->
<span class="module-cta__text">PRESS ME</span>
</a>
<div class="module-cta__open">
<div class="module-cta__open-inner">
<div class="hero-cta__contact-points">
<div class="phone">
<div class="hero-cta_contact_logo">
<span><!-- phone.svg" --></span>
</div><!-- .service-logo -->
<div class="contact_trigger">
<a>Scroll down to 200px to see</a>
</div><!-- .contact_trigger -->
</div><!-- .phone -->
<div class="email">
<div class="hero-cta_contact_logo">
<span><!-- email.svg --></span>
</div><!-- .service-logo -->
<div class="contact_trigger">
<a>this div fold back up</a>
</div><!-- .contact_trigger -->
</div><!-- .email -->
</div><!-- .hero-cta__contact-points -->
<button class="module-cta__close module-cta__cancel"><i class="icon"><span></span></i></button>
</div><!-- .hero-cta__open-inner -->
</div><!-- .hero-cta__open -->
</div><!-- .hero-cta -->
</div>
</section>
<section class="spacer"></section>
<section id="service_area">
<div class="area_input">
<div class="module-cta area-cta wow fadeInUp" id="form_module">
<a class="module-cta__button area-cta__button">
<span class="module-cta__text area-cta__text">NOW PRESS ME</span>
</a>
<div class="module-cta__open area-cta__open">
<div class="module-cta__open-inner area-cta__open-inner">
<div class="area-cta__search">
<form class="postcode_form" id="postcode_form" name="postcode_form" action="#">
<input type="number" id="your_postcode" class="your_postcode" name="postcode" placeholder="3???">
<button type="button" class="area-btn"><span></span></button>
<a class="call-now">##########</a>
</form>
</div><!-- .area-cta__search -->
<button class="module-cta__close module-cta__cancel"><i class="icon"><span></span></i></button>
</div><!-- .area-cta__open-inner -->
</div><!-- .area-cta__open -->
</div><!-- .area-cta -->
</div><!-- .area_input -->
</section>
<section class="spacer"></section>
</body>
脚本: 我确信其中很多内容都可以清理和缩小，但现在我只是想让这一切顺利进行。
// opens & closes modules by clicking module name
$('.module-cta__button').on('click', function(){
if($(this).parent().hasClass('hero-cta')){
$(this).parent().toggleClass('module-cta--active');
} else {
if($(this).parent().hasClass('area-cta')){
$(this).parent().toggleClass('module-cta--active');
}
}
});
// closes modules with .module-cta__close btn
$('.module-cta__close').on('click', function(){
if($(this).closest('div .module-cta').hasClass('module-cta--active')){
$(this).closest('div .module-cta').removeClass('module-cta--active');
}
});
// closes modules on scroll.
// * works but doesn't apply scroll tolerance of 200px for #area
$(window).scroll(function(){
var currentPos = $(window).scrollTop();
var module = $('div .module-cta');
if(module.hasClass('module-cta--active') && module.position().top <= currentPos+200){
$('div .module-cta--active').removeClass('module-cta--active');
}
});
// closes modules when escape key is pressed
$(window).keydown(function(escape){
var key = escape.which;
if(key == 27){
$('div .module-cta--active').removeClass('module-cta--active');
}
});
参见Fiddle了解css
- 感谢您提前提供的任何帮助或有用的建议。
最佳答案
我整理了一个更小、更简单的演示，只是为了向您展示完成此任务需要哪些变量。本质上，当单击 div 时，使用 $(document).scrollTop() 捕获当前文档滚动位置。还存储对已单击的当前 div 的引用。
滚动时，检查当前滚动和新滚动之间的差异，并使用单击的 div 引用，当差异为 200 或更大时缩小 div。下面的 JS fiddle ；
https://jsfiddle.net/jLqu4pas/
来自 Fiddle 的代码；
var currentScroll;
var lastClickedDiv;
$('section').click(function(){
$(this).css({'height' : '400'})
currentScroll = $(document).scrollTop();
lastClickedDiv = $(this);
console.log(currentScroll);
})
$(window).scroll(function(){
if($(document).scrollTop() > currentScroll + 200){
lastClickedDiv.css({'height' : 0})
}
})
关于javascript - 动态设置滚动坐标并从这些坐标更改具有 200px 滚动容差的 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35362829/