How to load scrolling head text to top fixed header area by 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);

});

});

How to load heading text to fixed top header area? if I scroll content (to up or down ) the fixed top header's nearest h1 content should load to fixed header div. pls help. https://jsfiddle.net/4grn06fv/4/

It's not clear what you want. Please update your question with better explanation. What is your goal? Where is the issue? — divy3993, Jan 20 '16 at 11:09
when scrolling the content of div(see js fiddle) top visible h1 text(HD1/HD2/HD3) should load to top black fixed area. https://jsfiddle.net/4grn06fv/4/ — PRANAV, Jan 20 '16 at 11:19

Tom Bowen · Answer 1 · 2016-01-20T11:25:42.953

First off you need an event that you can use to trigger your text change.

This event I assume should be the $(window).scroll() function. This will trigger every time the scroll position changes at all. So you'll want to detect the current position and then decide to act or not. You can achieve that by using $(window).scrollTop();

So together you'll have something like:

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

You'll want to detect the height of your div, and then when the scroll height is beyond the div height change the text.

score 0 · Accepted Answer · edited May 23 '17 at 12:07

I'll start my answer just like @Tom.Bowen89.

First off, please read this https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors , awful selector choices are the cause of all evil in the world.

Now then, now that we have that out of our way, we can proceed to the solution to your problem, I used this SO answer to form my answer https://stackoverflow.com/a/7557433/5733647.

The full solution is here 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, like I said before, I stole the function isElementInViewport from the linked SO answer, it does exactly what it's called, given an element, it checks if you can see it. Using that function, the simple array and the onScroll event function, I check which row is visible during scroll, I choose the first one and change the contents of header.

It is super simple and will probably work with anything you throw at it.

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

2 Answers2