CODEWITHSUNDEEP
javascriptjqueryhtml
PRANAV
PRANAV

Reputation: 1109

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

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

Upvotes: 1

Views: 71

Answers (2)

user1234141515134321321513
user1234141515134321321513

Reputation: 166

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.

Upvotes: 0

Tom Bowen
Tom Bowen

Reputation: 8534

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.

Upvotes: 1

Related Questions