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

Question

$(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/

Answer 1

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

我认为该事件应该是$（window）.scroll（）函数。 每当滚动位置完全改变时，这将触发。 因此，您需要检测当前位置，然后决定是否采取行动。 您可以使用$（window）.scrollTop（）;实现此目的。

因此，您将共同拥有：

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

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

Answer 2

我将像@ 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事件函数，我检查滚动过程中可见的行，选择第一个并更改标题的内容。

它非常简单，可能会与您扔给它的任何东西一起工作。