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

When adding files through drag and drop, the FormData is including a blank file field in the sent

I am currently working on a photo upload page that has drag and drop functionality enabled. Below is the form code: <form id="Upload" method="post" action="sessionapi/UserPicture/Upload" enctype="multipart/form-data"> <input class="box__file ...

javascriptjqueryhtmlajaxdrag-and-drop

"Resolving the issue with unnecessary line breaks in Optimizepress when input is contained within a paragraph

I am experiencing an issue with the code on my server: <p>This is a test to determine why the <input type="text" style="text-align: center;" value="input"/> element appears on a new line when displayed on a wordpress page.</p> When view ...

htmlcsswordpress

Dual Image Flip Card Effect for Eye-Catching Rotations

In the process of enhancing a website, I am interested in incorporating a feature that involves multiple cards with both front and back sides (each containing separate images). Initially, the plan is to display only the front side of the card. Upon clickin ...

javascripthtmlcssfrontend

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

html

Troubleshooting: Issue with NodeJS Mongoose async function not returning value

Having an ongoing issue with retrieving a value from my async functions in the mongoose service. The problem persists as it consistently returns undefined, leaving me puzzled about what's going wrong. Being new to this area, any assistance would be gr ...

javascriptnode.jsmongodbasynchronousmongoose

Making HTTP requests with axios in Node.js based on multiple conditions

I'm facing an issue with making get calls using axios to both activeURl and inactiveURl. The goal is to handle error messages from the activeUrl call by checking data from the inactiveUrl. However, I keep receiving error messages for the inactiveURL e ...

javascriptnode.jsaxios

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

phpjavascriptcsscompressionserver-side

Crosschecking form password with MySQL database for verification

As a newcomer to PHP, I am facing challenges while setting up a login system. My struggle lies in verifying if the password entered in a form matches the corresponding email stored in a MySQL database (considering the email address was also submitted on th ...

phphtmlmysqldatabaseauthentication

Receiving a 403 Forbidden error when trying to submit a Django form using Ajax

I have implemented a feature that allows users to remove posts via ajax. Each post has a boolean field called live_until_removed which, when set to false, makes the post disappear. However, when I click on remove, I encounter a 403 error which references: ...

pythonajaxdjangojquery

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

Tips for linking two tus servers

Trying to find a solution for uploading files with resume capability to Cloudflare using the tus enabled API. The challenge is ensuring that credentials remain secure, which prevents direct uploading from the browser to Cloudflare. This requires implementi ...

javascriptnode.jsexpresscloudflaretus

The issue arises when trying to escape double quotes within a regex pattern using ng-pattern

My ng-pattern validation includes a regex pattern ^[^\./:*\?\"<>\|]{1}[^\/:*\?\"<>\|]{0,254}$ to prevent invalid characters in file paths and set a limit. However, when I specify the ng-pattern as: ng-p ...

javascriptangularjsregexng-patternangularjs-ng-pattern

Implement the MathJax package for automatic word wrapping of mathematical

I have implemented additional processing for MathJax using the following code snippet: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] }, "HTML-CSS": { ...

htmlioscssmathjax

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

Hey there! I'm diving into the world of JavaScript and HTML, and I need some guidance on creating a menu that can toggle visibility of specific content in div(s) depending on which button (picture1-12) is clicked. My idea is to have one div that can d ...

javascripthtmlcss

Encountering an issue with Angular routing: Cross-origin requests are restricted to specific protocol schemes, such as HTTP

I encountered an error while working on angular routing. Below is my HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src= ...

javascripthtmlangularjs

Need assistance with PHP syntax?

Can you guide me on the correct syntax for creating a target link for a profile? <a href="index.php?p=profile&uid=<?php echo $_SESSION["uid"]; ?>"> <?php echo $_SESSION["username"]; ?></a> The variables I am working with are: ...

phphtml

Converting an object with a combination of different index types into a string representation

I'm dealing with a unique object structure that behaves similarly to an array, except it contains a mix of index types (numbers and strings). Here's an example: var myObj = []; myObj[0] = 'a'; myObj[1] = 'b'; myObj[2] = &apos ...

javascriptjson

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...

javascriptphpjqueryhtmlmysql

Cordova triggers a 500 (Internal Server Error) when making an Ajax request

When I send an ajax request, it works fine in the browser but returns an internal error when sent within a Cordova APK. Upon comparing the headers, I noticed that the only difference is in the ORIGIN: The one not working has origin: file:// POST 500 (In ...

javascriptandroidajaxcordova

The datepicker in Vue.js is experiencing a limitation where it does not allow for the default value of an

I incorporated the vue-date-picker for date picker functionality in my input fields because it perfectly aligned with all of my requirements. The issue I encountered is that when loading the page, I attempted to pass a default value from the database, but ...

javascriptvue.jsvuejs2datepickervue-component