[英]How to find the section reaches the top and add a class using plain javascript
我正在編寫一個函數來檢查我的任何部分是否到達窗口頂部，然后添加一個類。 不知道我缺少什么幫助將不勝感激。
<body>
<section class="row"></section>
<section class="row"></section>
<section class="row"></section>
<section class="row"></section>
</body>
let _handleSectionAnimation = function() {
let sections = document.querySelectorAll('.row');
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
Array.prototype.forEach.call(sections, function(el, i) {
console.log("element scroll top = " + el.scrollTop);
let offsetElement = el.offsetHeight;
if(currentScroll > offsetElement) {
el.classList.add('animate');
}
});
}
（1）僅在用戶完成滾動時才需要做某事，並為此簽出my（smacaz，可能是最后一個答案）答案此處jQuery scroll（）檢測用戶何時停止滾動 （2）任何可見元素必須在窗口點下方scrolltop及其底部的位置必須小於窗口點的值scrolltop +窗口點高度（3）可以使用窗口點偏移點頂部（jquery）來獲取任何元素的位置
由於我們在滾動完成時會執行某項操作，因此我們不在乎它們是從上到下還是從下到上滾動。 假設您有jQuery代碼：
function checkVisibleSection(element){ /* @param element is a valid element to be selected(the sections), eg #section etc. Depending on the section width, more than one section can still be visible to user at a time, in any case we want the first fully visible */ var el = $(element); var l = el.length; /* now get the visible part of the screen (the top boundary) */ var top = $(window).scrollTop(); /* now get the visible part of the screen (the bottom boundary) */ var bot = top+($(window).height()); /* check the first fully visible section and do sth there */ for(var i=0;i<l;i++){ var ofs = el.eq(i).offset().top; var ofh = ofs+ el.eq(i).height(); if(ofs > top && ofs < bot){ /* we've got the element, do anything with it here eg, below */ el.eq(i).css({'border':'5px solid red'}); } } }
我已經驗證了此代碼，現在可以正常工作。
這是完整的工作代碼以及如何在滾動停止中使用checkVisibleSection函數：
$(function(){ /* asumming you have the following html: <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> */ var t; /* give it a little width and height */ $('.row').css({'width':'80%','height':'500px','border':'1px solid black','display':'block'); document.addEventListener('scroll',function(e){ clearTimeout(t); checkScroll(); }); function checkScroll(){ t = setTimeout(function(){ /* they are done scrolling check which row is visible */ checkVisibleSection('.row'); },500); /* You can increase or reduse timer */ } /* Please copy and paste the code for checkVisibleSection() function here (see it below) */ function checkVisibleSection(element){ /* @param element is a valid element to be selected(the sections), eg #section etc. Depending on the section width, more than one section can still be visible to user at a time, in any case we want the first fully visible */ var el = $(element); var l = el.length; /* now get the visible part of the screen (the top boundary) */ var top = $(window).scrollTop(); /* now get the visible part of the screen (the bottom boundary) */ var bot = top+($(window).height()); /* check the first fully visible section and do sth there */ for(var i=0;i<l;i++){ var ofs = el.eq(i).offset().top; var ofh = ofs+ el.eq(i).height(); if(ofs > top && ofs < bot){ /* we've got the element, do anything with it here eg, below */ /* clear all previous operation (reset to default) to avoid duplicates */ el.css({'border':'1px solid black'}); /* start a new operation */ el.eq(i).css({'border':'5px solid red'}); } } } });
經過測試和工作
我如何獲得一個滾動頁面和導航的導航，當它使用普通的javascript到達頂部導航
[英]how do i get a navigation that scrolls with page and stick when it reaches the top nav with plain javascript
如何將 class 添加和刪除到 div 元素平原 javascript
[英]How to add and remove a class to a div element plain javascript
使用javascript和css到達屏幕頂部時修復元素
[英]Fix an element when it reaches the top of the screen using javascript and css
如何使用純JavaScript在Ajax請求中添加自定義標頭（非JQUERY）？
[英]How to add custom header in ajax request using plain javascript (NOT JQUERY)?
如何使用純JavaScript獲取具有特定類的鏈接的索引值？
[英]How to get index value of a link with a specific class using plain JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.