Also ich möchte wissen, wie ich bekommen kann, welcher Teil oder Teil meines HTML bin ich gerade. Ein Beispiel Wie weiß ich, ob ein Benutzer bereits mehr als 2 Teil nach unten gescrollt wird mit Hilfe von JavaScript Oder wenn sie zur Zeit in Teil 1Woher weiß ich, welcher Teil von HTML der Benutzer ist?
sind<html>
<head>
</head>
<body>
<section class=“part 1”>
</section>
<section class= “part2>
</section>
</body>
</html>
können Sie verwenden, ist [ „: Fokus“] Funktion finden welches div hat momentan den Fokus.
Die folgenden Codes geben Ihnen eine kleine Vorstellung davon, wie mit dieser Situation umzugehen ist. Im Wesentlichen können Sie tun, was Sie wollen, wollen, um die Bildlaufposition zu bringen mit:
document.documentElement.scrollTop
Sie wollen auch einen Bereich, wo das Element Sie wohnt suchen, in unserem Fall, es .part1 und .part2 ist. Wir können diesen Bereich erhalten, indem wir offsetTop als Anfang des Limits und offsetTop + clientHeight verwenden, um das Ende zu bestimmen.
Sie müssen das Fensterrollen-Ereignis verfolgen.
Das folgende Beispiel ist generic:
$(window).scroll(function(e) {
if (document.documentElement.scrollTop > 0
&& document.documentElement.scrollTop < $('.part2').offset().top) {
$('div').html("At part1")
} else {
$('div').html("At part2")
}
});
Ebenso, wenn Sie ein wenig Modularität wollen:
$(window).scroll(function(e) {
let watchList = ['part1', 'part2', 'part3'];
let scrollTop = document.documentElement.scrollTop;
for (var classname of watchList) {
let el = document.getElementsByClassName(classname)[0];
if (scrollTop > el.offsetTop &&
scrollTop < el.offsetTop + el.clientHeight) {
$('div').html("At <strong>"+classname+"</strong>");
}
}
});
Die Möglichkeiten sind grenzenlos weiter und machen Sie das nützlich aber ich überlasse das dir.
können Sie die mouseenter-Funktion verwenden, die ausgelöst wird, wenn die Maus zum ersten Mal in dieses div geht.
Sie können Mouseover-Funktion verwenden, um zu finden, wo Maus ist jetzt. Es wird ausgelöst, wenn sich die Maus innerhalb dieses Bereichs bewegt.
$(".part1").on('mouseover', function(){
//your command
});
Sie können Javascripts offsetTop-Funktionalität verwenden. Dies ist ein Parameter, der angibt, wie weit von der Spitze entfernt ein Div in der Anzahl der Pixel ist.
Es kann auch zurückgeben, wie weit der Benutzer gescrollt hat, wenn er das Fensterobjekt selbst aufgerufen hat. Dann ist es nur eine Frage der Mathematik. Stellen Sie fest, ob der Benutzer weit genug nach unten gescottet hat, um an der div als Referenz vorbei zu kommen.
Zum Beispiel:
var part1DivOffset = document.getElementsByClassName("part 1")[0].offsetTop;
var part2DivOffset = document.getElementsByClassName("part2")[0].offsetTop;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
Dieser Code wird Ihnen 3 Variablen erhalten. Die ersten 2 Zeilen speichern den OffsetTop der Divs. Während die dritte Zeile erkennt, wie weit der Benutzer gescrollt hat. Dann können Sie Mathe mit den Variablen tun:
if(scrollTop >= part1DivOffset){
//we are past part1
}
if(scrollTop >= part2DivOffset){
//We are past part 2
}
if(scrollTop >= part1DivOffset && scrollTop < part2DivOffset){
//We are past part 1 but not past part 2
}
Mögliches Duplikat [Get div-Tag Scroll-Position mit Hilfe von JavaScript] (https://stackoverflow.com/questions/4373667/get-div-tag-scroll-position- Verwenden von Javascript – Paul