javascript - 滚动时，如果offsetTop为> =元素，请执行某些操作

当滚动为#braille时，页面上的图像（position:absolute）位于0；当滚动为> 0时，图像位于position:fixed。当滚动为> 900时，其他一些元素会淡入。我要做的是使#braille图像在滚动时出现的2个元素之间“停止”（将position:fixed换回position:absolute并用，可以将其正确放置在2个元素之间）。我认为如果您查看我创建的JSFiddle会更清楚（我添加了一条文本，其中#braille图片在滚动时应停止）：http://jsfiddle.net/multiformeingegno/vde7ym94/7/这是JS脚本：$(function () { var timeoutId = null; // hide by default the arrow, the music sheet, the phrase and the yellow circle $('#ombra, #logopiano,#presentazione, #frase').hide(); $("#braille").css({ "position": "absolute", "top": "-56px", "left": 0, "margin": 0 }); $("#ombra").css({ "top": "-56px" }).show(); var w = $(window).height(); var c = $("#homescroll").height(); $("#homescroll").css({ "height": w + 44 + "px" }); // define the arrow var $freccia = $('#freccia1'); // define the braille shadow var $ombra = $('#ombra'); // define the music sheet image var $logopiano = $('#logopiano'); // define the phrase and the yellow circle var $presentazionefrase = $('#presentazione, #frase'); $(window).scroll(function () { scroll = $(window).scrollTop(); if (scroll >= 900) { // events firing when scrolling down $("#intro").hide(); $freccia.fadeOut('slow'); $ombra.fadeOut('slow'); $logopiano.fadeIn('slow'); clearTimeout(timeoutId); timeoutId = setTimeout(function () { $presentazionefrase.fadeIn('slow'); }, 500); } else { // events firing when scrolling (back) up clearTimeout(timeoutId); $("#intro").show(); if (scroll === 0) { $presentazionefrase.hide(); $freccia.fadeIn('slow'); $("#braille").css({ "position": "absolute" }); } else { $("#braille").css({ "position": "fixed", "margin": "auto", "right": 0, "top": "-56px" }); }; $logopiano.fadeOut('slow'); if ($presentazionefrase.css('display') === "block") { $presentazionefrase.fadeOut('slow'); } // make the braille shadow image visible only when at the top of the page if (scroll < 10) { $ombra.fadeIn('slow'); } else { $ombra.fadeOut('slow'); } } });});我以为可以做这样的事情，但是不起作用：if ($("#braille").offset().top >= $("#frase").offset().top) { $("#braille").css({ "position": "absolute", "top": $("#frase").offset().top + "px", });};问题是这应该适用于所有分辨率……这就是为什么我认为我可以解决这种计算盲文图像与top:something元素的偏移量的原因。 (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 尝试：if ($("#braille").offset().top + $("#braille").height() >= $("#logopianocontainer").offset().top + 90) { $("#braille").css({ "position": "absolute", "top": $("#logopianocontainer").offset().top - $("#braille").height() + 90 + "px" }); };Here a working jsfidlle请注意，我使用的是$("#logopianocontainer")的$("#frase")，这是因为#frase在display: none到达#braille的位置时具有#logopianocontainer，因此其.offset（）。top的计算错误。另一方面，请注意元素高度的使用，这是因为当您比较时，将在元素顶部之间进行比较，并且您想知道img的底部何时到达$("#braille").offset().top >= $("#logopianocontainer").offset().top的位置然后将$("#logopianocontainer")的顶部设置在$("#braille")的位置，则90值为估算值，将img定位在其他两个元素的中间。避免跳跃我发现了img跳起来的原因，是因为当滚动$("#logopianocontainer").offset().top - $("#braille").height()是固定的它跳到该位置。看这里if (scroll >= 900) { // events firing when scrolling down}else { // events firing when scrolling (back) up if (scroll === 0) { ... } else { $("#braille").css({ "position": "fixed", "margin": "auto", "right": 0, "top": "-56px" });};因此，您可以设置一个更具体的值（950看起来不错），或者使其更具动态性，例如，当#braille定位为绝对值时，放置一个变量，该变量可以跟踪在向下滚动时以及向上滚动时向下移动的距离，减小变量，当变量为#braille切换为#braille，这只是一个想法，可能比这更复杂。 (adsbygoogle = window.adsbygoogle || []).push({});