1
我有一個單頁網站有點擊時跨兩個div模塊200像素滾動寬容。動態設置滾動座標和改變的DOM元素與這些座標
首先是在頂部，在英雄部和與當前代碼工作所需的。第二個更進一步在另一個部分的頁面。目前，第二個模塊在滾動發生後立即關閉。
我需要做的就是文件滾動座標點擊div時。然後，一旦用戶向上或向下滾動200px，div關閉備份。不管它（在div）是在網站上。
所有我發現這裏和其他地方的問題僅涉及相對於在頁面加載的窗口位置滾動公差設定。但對我來說，這不是一個好手。這個網站是響應式的，因爲它改變了div的意願/可能是未知的初始位置。我需要的動態存儲視口滾動位置點擊div的時候，然後分配200像素公差好歹。
我希望這是有道理的。我現在已經有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
- 感謝任何幫助或有益的建議先進小提琴。
謝謝@劉易斯已經完成了這項工作。我新的我需要存儲點擊和滾動數據，並將其用於比較。我只是無法解決如何做到這一點。在我的嘗試中，我沒有像你那樣在我的點擊功能之外建立變量。這顯然是爲什麼滾動功能沒有它。大聲笑。 – Paralellos