如何通过jquery将滚动头文本加载到顶部固定标题区域

How to load scrolling head text to top fixed header area by jquery

本文关键字：顶部 区域 标题 加载 文本 jquery 何通过 滚动      更新时间：2023-09-26
$(document).ready(function(){   
var x = $(".row1").offset();
var row1TopPos = x.top;
alert(row1TopPos);
var y = $(".row2").offset();
var row2TopPos = y.top;
alert(row2TopPos);
var z = $(".row3").offset();
var row3TopPos = z.top;
alert(row3TopPos);
 $(".wrapper").scroll(function(){
if (row1TopPos < -5 && row1TopPos < 35)
{
var hdtext = $(".row1 h1").text();
$("#lodHd").text(hdtext);
}
if (row2TopPos < -5 && row3TopPos < 35)
{
var hdtext = $(".row2 h1").text();
$("#lodHd").text(hdtext);
}
if (row3TopPos < -5 && row3TopPos < 35)
{
var hdtext = $(".row3 h1").text();
$("#lodHd").text(hdtext);
}
});

$("button").click(function(){
alert(row1TopPos);
});
});

如何将标题文本加载到固定的顶部标题区域？ 如果我滚动内容（向上或向下），固定顶部标题最近的 H1 内容应加载到固定标题div。 https://jsfiddle.net/4grn06fv/4/

首先，您需要一个可用于触发文本更改的事件。

我假设这个事件应该是 $（window）.scroll（） 函数。每次滚动位置更改时都会触发此操作。因此，您需要检测当前位置，然后决定是否采取行动。你可以通过使用 $（window）.scrollTop（）;

因此，您将一起拥有以下内容：

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // If trigger height change h1 text
});

您需要检测div 的高度，然后当滚动高度超过div 高度时更改文本。

我将像@Tom.Bowen89一样开始我的答案。

首先，请阅读此 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors，可怕的选择器选择是世界上所有邪恶的原因。

现在，既然我们已经解决了这个问题，我们可以继续解决您的问题，我用这个SO答案来形成我的答案 https://stackoverflow.com/a/7557433/5733647。

完整的解决方案在这里 https://jsfiddle.net/keoukmrb/.

var wrapper = document.getElementById("wrapper");
var header = document.getElementById("header");
var rows = document.getElementsByClassName("row");
function isElementInViewport (el) 
{
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}
function onScroll()
{
    var length = rows.length;
  if(!length)
  {
    return;
  }
  for(var i = 0; i < length; i++)
  {
    var row = rows[i];
        if(isElementInViewport(row))
    {
        header.innerHTML = row.childNodes[0].innerHTML;
      return;
    }
  }
  // IF YOU WANT SOMETHING TO BE SHOWN IF NONE ELEMENTS ARE VISIBLE
  wrapper.innerHTML = "none visible";
}
wrapper.addEventListener("scroll", onScroll, false);

所以，就像我之前说的，我从链接的 SO 答案中窃取了函数 isElementInViewport，它完全按照它的名字做了，给定一个元素，它会检查你是否可以看到它。使用该函数，简单数组和onScroll事件函数，我检查滚动过程中可见的行，选择第一行并更改标题的内容。

它非常简单，可能会与你扔给它的任何东西一起使用。

相关文章：