Adjust Node visibility as User scrolls to it using CSS

Suppose I have a structure like this:

<br><br><br>...Numerous BRs...<br><br><br>
<div id="thetarget"></div><div id="show"></div>
<br><br><br>...Numerous BRs...<br><br><br>

I aim to display the #show when the user scrolls to the #thetarget and potentially manipulate the CSS styles of the #thetarget when the user scrolls to it, all without requiring any "click interaction" from the user as typically done with 

<a href="#thetarget">the target</a>

Is it feasible to achieve this solely using CSS code?

If not, how would I implement this using JavaScript (non-jQuery) without significantly impacting performance (=minimal effect)?

Appreciate your guidance

javascripthtmlcss

Answer №1

If you prefer, you can achieve the same result using only JavaScript

window.onscroll = function() {
  var show = document.getElementById('show');
  
  if (this.pageYOffset > 100) {
    show.style.display = 'block';
  } else {
    show.style.display = 'none';
  }
}
#thetarget {
  height: 1000px;
}
#show {
  display: none;
  position: fixed;
  z-index: 1;
  bottom: 0;
}
<div id="thetarget">
  <h1>Keep scrolling</h1>
</div>
<div id="show">
  <h1>Revealed</h1>
</div>

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

What is the proper way to add process.env.PORT to the script declarations string within my package.json file?

I am facing an issue while trying to upload my file on Heroku that requires including the PORT specification. Unlike my previous projects, this project consists of only html, js, and css files instead of an index.js file. To run it, I am using "live-server ...

htmlnode.jsheroku

Creating static HTML files for non-static pages using Next.js SSR/ISR

While troubleshooting an issue with a specific page, I noticed that a static HTML file was created for a non-static page using Next.js. Is this expected? The page, which we will refer to as "page1," does not include the functions getStaticPaths() or getSta ...

javascriptreactjsnext.jsincremental-build

What methods can a Discord Bot use to respond with specific messages to individual users?

Hey there! I'm dipping my toes into the world of coding and thought it would be fun to create a Discord bot that gives different responses each time it's mentioned. Just so you know, I'm working with Discord.js version 13 for this project. ...

javascriptnode.jsdiscord.js

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Is there a way to make my bootstrap navbar right-to-left (RTL)? I want the logo to be on the right and the links to flow from right to left. I've tried various tricks but none of them seem to work. Here's the code I currently have: <nav class ...

csstwitter-bootstrapbootstrap-4navbar

Steps to convert HTML <li> elements into HTML <datalist> elements

In my HTML file, I have a list of objects within li elements that I would like to transfer to an HTML datalist within the same file. I am currently working on a Node.js Express framework application where the data within the li elements is coming from an S ...

htmlnode.jsexpress

Is it possible to modify the cell color or highlight in Excel through Node.js?

Hi there, I'm curious if it's possible to highlight a cell in an .csv file using Node.js. I've been able to successfully write to the file, but now I want to emphasize the headings. ...

javascriptnode.jsexcel

What method can be used to eliminate the shadow of a container when rotating a div?

I am currently working on creating a dynamic card that expands and reveals additional information upon mouse rollover. The challenge I am facing is that the shadow effect remains visible when flipping the card, which disrupts the overall desired effect. H ...

csshtmlcontainersshadow

Using three.js library from npm to import the THREE.Lut() functionality

After installing three packages from npm, I attempted to invoke: lut = new THREE.Lut( colorMap, numberOfColors ); However, I encountered the error message: "export 'Lut' (imported as 'THREE') was not found in 'three'. Altho ...

javascriptthree.jses6-modules

Hover over to reveal sliding menu

Hey everyone! Take a look at this code snippet: <body> <div id="slidemenubar"> <a href="">1</a> </div><br> <div id="slidemenubar2"> <a href="">2</a> </div> </body> When hovering over the ...

javascriptjqueryhtmlcss

Tips on utilizing Twitter Boootstrap's form validation tooltip messages

Before anything else, let me clarify that I am not inquiring about creating tooltips from scratch using Bootstrap's javascript guide, which can be found in the documentation. I recently utilized type="email" with version v3.3.1. It automatically vali ...

javascriptcsshtmltwitter-bootstraptwitter-bootstrap-3

Exploring the functionality of the PageIndicator for Wearable Technology

Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challe ...

htmlcssswipetizentizen-web-app

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

I am currently facing an issue with a menu structure, where parent menu items have submenus that need to toggle on click. However, I am encountering a problem where, upon placing the code inside a forEach loop, both submenus toggle instead of only togglin ...

javascriptwordpress

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

javascriptjqueryhtmlcsstwitter-bootstrap

After making an Ajax call using AngularJS in a PHP file, I expected to receive only a success or fail message. Instead, I received the entire HTML page code along

After making an Ajax call using AngularJS in a PHP file, I expected to receive only a success/fail message. However, I ended up receiving the full HTML page code along with tags. Here is my AngularJS code: $http.post('ajax_Location.php',{ &apos ...

javascriptphpjqueryhtmlangularjs

Guidelines on launching an ionic 4 modal using routes

How can I open a modal using routes? I attempted the following approach, but it did not work as expected: ngOnInit() { this.launchModal(); } async launchModal() { const modal = await this.modalController.create({ component: AuthPasswordR ...

javascriptangularionic4

Looking for a JavaScript library to display 3D models

I am looking for a JavaScript library that can create 3D geometric shapes and display them within a div. Ideally, I would like the ability to export the shapes as jpg files or similar. Take a look at this example of a 3D cube: 3d cube ...

javascriptreactjstypescript3drender

What is the best way to send a parameter to the callback function of a jQuery ajax request?

I am facing an issue where I need to pass additional variables to a jQuery ajax callback function. Consider the following scenario: while (K--) { $.get ( "BaseURL" + K, function (zData, K) {ProcessData (zData, K); } ); } func ...

javascriptjqueryajaxcallbackclosures

Tips on how to align bullet points in a list

I'm currently working on a little exercise that requires me to replicate this However, I'm facing some difficulty aligning the bullets as shown in the reference. My content is aligned but not the bullets. Here's the link This is my HTML: ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

MUI full screen dialog with material-table

Issue: When I click a button on my material-table, it opens a full-screen dialog. However, after closing the dialog, I am unable to interact with any other elements on the screen. The dialog's wrapper container seems to be blocking the entire screen. ...

javascriptreactjsmaterial-ui