動態設置滾動坐標並從這些坐標更改具有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.