CODEWITHSUNDEEP
javascriptjqueryhtmlcss
damoles
damoles

Reputation: 43

Highlighting line of text in div while scrolling

I'm trying to highlight some text in a div, with the highlight being a fixed line in said text. So far I've got a very simple solution that uses two divs, one that houses the text, and the other acting as the highlight, and as you scroll the text, it will pass through the highlight div.

HTML is as follows:

<div id="test">
     text...
</div>
<div id="highlight"></div>

CSS is:

#highlight {
    position: fixed;
    top: 50%;
    width: 100%;
    background-color: #ccff00;
    height: 30px;
    opacity: 0.6;
}
#test{
    position: absolute;
    font-size: 30px;
    top: 50%;
}

A demo of it can be found here

I was wondering if anyone knows how to make it so that scrolling the text can be done in a way where as a user scrolls, the next line becomes highlighted. Currently it scrolls normally, so the highlight may miss a line, or not highlight a complete line. Additionally, I was wondering how it would be best to make the text scroll all the way to the bottom. Would adding a margin of the same size as the offset at the top work? Alternative solutions for any of this would be appreciated as well.

Upvotes: 1

Views: 4569

Answers (2)

Bennet Sam
Bennet Sam

Reputation: 136

Not sure if this https://jsfiddle.net/ok0x3apo/6/ is what you're looking for

You can see that I'm remodifying the entered text, to get line by line highlight as page scrolls.

var el = document.getElementById("text"),
content = el.innerHTML.replace(/  |^\s+|\s+$/g,""),
lines = content.split(/\./);
var html = "";
for(var i in lines){
  html+="<p class='clear_display' id='id_"+i+"'>"+lines[i]+".</p>";
};
document.getElementById("text").innerHTML=html;

You can make changes to the "clear_display" class on how you prefer to have the text block. 

function calledEveryScroll() {
        var scrollPosition = $(window).scrollTop();
        for(var i in lines){
            var currentSection = document.querySelector("#id_"+i+"");

            var sectionTop = currentSection.offsetTop;
        if (scrollPosition<=0){
          $(".clear_display").removeClass('active');
                document.querySelector("#id_0").className += " active";
        }
            if (scrollPosition >= sectionTop-50) {
                $(".clear_display").removeClass('active');
                if (!$(currentSection).hasClass('active')) {
                    $(currentSection).addClass('active');
                if(previous){
                if(currentSection.offsetTop==previous.offsetTop){
                    $(previous).addClass('active');
                }
              }
              var previous = currentSection;
                }
                //return false;
            }
     }
    }
 function resizing(){
        var offset =100;
 var bottom = $(window).height()-offset;
  $('#text').css('margin-bottom',bottom);
 }

This function checks each line when page scrolls.For the scroll to reach the bottom I'm calculating the margin-bottom.Hope it helps.

Upvotes: 2

spencer.sm
spencer.sm

Reputation: 20564

Try adding an event listener to the window on scroll. Then calculate the offset by taking the scrollY % line-height and set the highlight top margin to the negative of that value.

JavaScript below:

var highlight = document.querySelector("#highlight");

window.addEventListener('scroll', function(e){
    var y = window.scrollY;
    var offset = y % 30;
    highlight.style.marginTop =  - y % 30 + "px";
});

See Working Fiddle

Upvotes: 3

Related Questions