动态设置滚动坐标并从这些坐标更改具有200px滚动公差的DOM元素
[英]Dynamically set scroll coordinates & change DOM element with 200px scroll tolerance from these coordinates
问题描述
我有一个页面网站，其中包含两个div模块，这些模块在单击时会扩展。
第一个位于“英雄”部分的顶部，并且当前代码可根据需要工作。 第二个部分在另一部分的页面下方。 当前，第二个模块在滚动发生后立即关闭。
我需要做的是单击div时获取文档滚动坐标。 然后，一旦用户向上或向下滚动200像素， div就会重新关闭。 不管它在站点上什么位置（ div ） 。
我在这里和其他地方找到的所有问题仅涉及设置页面加载时相对于窗口位置的滚动公差。 但是对我而言，这不是成功。 该站点具有响应能力，并且随着它的更改， div的初始位置将会/可能是未知的。 我需要某种方式来在单击div时动态存储视口滚动位置，然后分配200px的公差。
我希望这是有道理的。 我已经在这里待了12个多小时了。 SOS :)
这是小提琴
如果您不想转到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');
}
});
看到小提琴的css
- 感谢您提供的任何帮助或有用的建议。
2 个解决方案
解决方案1
0 2016-02-12 13:23:40
因此，我整理了一个可能会对您有所帮助的脚本。
我已经对其进行了一些基本测试，但是如果您遇到任何问题，请发表评论。
// Generate offsets and return them as an object
function generateOffsets($element, tolerance)
{
var offsets = $element.offset(),
offsetTop = offsets.top;
return {
scrollPos: offsetTop,
toleranceTop: offsetTop - tolerance,
toleranceBottom: offsetTop + tolerance
};
}
// Run a callback when the user leaves the scroll tolerance of a set of elements
function closeOnScroll($elements, tolerance, callback)
{
$elements.each(function() {
var $element = $(this),
offsets = generateOffsets($element, tolerance),
resizeEvent;
// On resize, regenerate the offsets so they stay up to date
$(window).on('resize', function(e) {
resizeEvent = e;
offsets = generateOffsets($element, tolerance);
});
// On scroll check if we've left the tolerance area, if so run the event and unbind
$(window).on('scroll', function(e) {
var windowPos = $(this).scrollTop();
if (windowPos < offsets.toleranceTop || windowPos > offsets.toleranceBottom) {
callback($element);
$(this).unbind(e);
$(this).unbind(resizeEvent);
}
});
});
}
// Example: Apply the event to a set of elements
$('.btn').click(function() {
closeOnScroll($('div .module-cta'), 200, function($element) {
$element.removeClass('module-cta--active');
});
});
该脚本要记住的一点是，每当用户单击您的按钮时，都需要应用该脚本。 您可能会说， 为什么要这么做-但实际上会对性能产生严重影响。
这些事件都依赖于滚动和调整大小，这两者都很慢，特别是如果未像本脚本中那样进行反跳的话。 但是，我在脚本中执行的操作是在事件发生后取消绑定事件。 否则，调整和滚动将一直持续到每个按钮，直到时间结束。 通过“解除绑定”事件，可以确保页面的长期运行性能。
我们不想破坏那些漂亮的动画吗？
解决方案2
0 已采纳 2016-02-12 13:31:16
我整理了一个更小，更简单的演示，只是为了向您展示完成此操作所需的变量。 本质上，单击div时，使用$(document).scrollTop()捕获当前文档滚动位置。 还存储对已单击的当前div的引用。
滚动时，检查当前滚动和新滚动之间的差异，并使用单击的div引用，当差异大于或等于200时缩小div。 JS在下面摆弄;
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 后不会停止移动？
[英]why does the element in my Javascript code not stop moving after it reaches 200px?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.