Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to have my text show up as I scroll? I came across this , but I'm interested in how it actually functions. I saw a similar inquiry before, but it doesn't make sense to me. Can someone please explain or provide some examples on how to achieve this effect?

Appreciate it!

HTML 

<div id = "divToShowHide" class = "BeforeScroll">Content I want to display while scrolling</div>

CSS

.BeforeScroll {
width: 100%;
height: 200px;
background-color: yellow;
}

.AfterScroll {
width: 100%;
height: 200px;
background-color: red;
}
javascriptjqueryhtmlcss

Answer №1

Let's consider a simple scenario: imagine that some of your text is within a <div id="visible_text"> positioned at 70% of the total height of the webpage. <div id="frame">

Initially, you would hide it using 

document.getElementById("visible_text").style.display = "none";

You can create a function

function OnScroll() {

            var totalHeight = this.offsetHeight; //(this refers to the frame that called the function from the code below)
            if (this.scrollTop || this.scrollTop > totalHeight * 0.7) { //if scrolling reaches 70% of height
               document.getElementById("appearable_text").style.display = "block"; 
            }
        }

and then assign it to be used

var frame = document.getElementById("frame");
frame.onscroll = OnScroll;

Naturally, instead of abruptly showing the <div>, you could smoothly fade it in or apply any variety of CSS/JQuery effects you desire.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking for the documentation for the latest version of Footable's Events. Can you point me

Does anyone know where to find information on the events that are fired for Footable and how to handle them? I checked the documentation at , but it doesn't provide much detail on events. If you have any resources or suggestions, please let me know! ...

javascriptjquerypluginsfootable

Issue with JQuery dialog not triggering autocomplete

I have integrated the JQuery 1.7.2 and JQuery-UI 1.8.18 libraries with both http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete. On a standard page load, the autocomplete function works perfectly with a text box in a form. It' ...

javascriptjqueryjquery-ui

Can someone explain the process of unescaping characters in an API response to me?

I have created an application that leverages AngularJS to pull data from the WP Rest API V2. The response includes escaped characters, like the example below: "excerpt": { "rendered": "<p>When we go shopping, we encounter many different labeling ...

javascriptangularjsjsonwordpressapi

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

Accessing the locally stored data and displaying it in ng-bind

My journey to learn javascript through this project has hit a roadblock. I have stored an exchange rate in local storage: localStorage.gbpUSD = "1.42746"; Now, I want to utilize it instead of the hardcoded exchange rate in the code below... <input t ...

javascriptangularjsionic-frameworklocal-storagecurrency

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

While working on my project, I encountered a JavaScript error in the console of Chrome. The error message stated "Unexpected token ]" and it was pointing to a specific line of raw HTML code. I am puzzled about what could be causing this issue. Unfortunatel ...

javascriptjqueryhtmlgoogle-chrome

Transform jQuery code to its equivalent in vanilla JavaScript

While I am proficient in using jQuery, my knowledge of pure JavaScript is somewhat limited. Below is the jQuery code that I have been working with: $(document).ready(function() { $.get('http://jsonip.com/', function(r){ var ip_addre ...

javascriptjqueryajax

Rearrange the layout by dragging and dropping images to switch their places

I've been working on implementing a photo uploader that requires the order of photos to be maintained. In order to achieve this, I have attempted to incorporate a drag and drop feature to swap their positions. However, I am encountering an issue where ...

javascriptangulartypescriptdrag-and-dropangular-cdk

Switching Story Tense on Facebook Open Graph

After creating a unique story for my facebook app, I discovered that when making a basic story post using the facebook js sdk, the resulting post is in past tense and depicts the object in singular form. For example, instead of saying: John is eating an a ...

javascriptfacebookfacebook-javascript-sdkfacebook-opengraph

A clever method for implementing lazy-loading using mobx

Can you provide guidance on the most effective way to lazy load properties with MobX? I've been grappling with this issue for a few days now, and I've struggled to find suitable examples ever since strict mode was introduced. While I appreciate ...

javascriptreactjslazy-loadingmobx

I'm wondering if there exists a method to arrange a multi-array in javascript, say with column 1 arranged in ascending order and column 2 arranged in descending order?

Here is an example of a randomly sorted multi-array: let arr = [[3, "C"], [2, "B"], [3, "Q"], [1, "A"], [2, "P"], [1, "O"]]; The goal is to sort it in the following order: arr = [[1, "O" ...

javascriptarrayssorting

Can Angular Flex support multiple sticky columns at once?

I am trying to make the information columns in my angular material table stay sticky on the left side. I have attempted to use the "sticky" tag on each column, but it did not work as expected. <table mat-table [dataSource]="dataSource" matSort class= ...

htmlcssangularangular-materialangular-flex-layout

Utilize CSS for defining columns within a layout

How can CSS be utilized to organize elements into columns without altering the html tag order? <ul> <li class="column-2">1</li> <li class="column-1">2</li> <li class="column-1">3</li> <li class="column- ...

htmlcss

What is the best way to automatically add a date and timestamp to every new entry?

I am currently working on a project that utilizes AngularJS and Ionic frameworks. The main feature of the project will involve users inputting data to create a list, and allowing any user to comment on each item in the list. One challenge I have encounter ...

javascriptangularjsionic-framework

Using Vue to handle Promise resolution - incorporating Laravel Gate logic into Vue

Trying to incorporate Laravel's authorization and policy into Vue has been a challenge for me. I'm working on creating a mixin that sends a GET request to a backend controller. The issue I've encountered is that the v-if directive is receiv ...

javascriptlaravelvue.js

What are some techniques for preventing Null Pointer Exception errors?

Currently, I am working on a project that involves creating a form with a dropdown field for categories. Based on the chosen category, I need to populate a second dropdown called subcaste using AJAX. To achieve this, I have implemented a method that disab ...

javascriptajaxvalidationjspservlets

Maintain the row's position during the sorting process

Within my jQuery Datatables table, there is a specific row (always the last one) that must remain at the very end for totaling purposes. This particular row can be identified by its values structured like this: <td><span class="last-row">MY V ...

jquerydatatables

Searching for a specific match in JSON data using React streaming technology: encountering issues with the .find method as

Having experience with functional programming in Java, I recently ventured into JavaScript. My current task involves streaming through a JSON output structured like this: { "originatingRequest": { "clientId": 1, "simulationName": "Sea ...

javascriptjsonreactjsreact-bootstrap

The synchronization feature of HighCharts fails to function properly if the charts being used have varying widths

When using HighCharts, I experimented with Synchronized multiple charts following the example in this Fiddle. It worked seamlessly when all the charts had equal width. $('#container').bind('mousemove touchmove touchstart', function (e) ...

javascriptchartshighcharts

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

I have a unique scenario where I am working with two images. When the mouse hovers over each image, two corresponding menu bars appear. However, the issue is that when the mouse moves away from the images, the menu disappears. Any suggestions on how to im ...

javascriptjqueryhtmlcss