When you reach a scrolling distance of over 300 vertical heights,

Is it possible to show and hide a class based on viewport height?

I am familiar with displaying and hiding a class after a specified pixel height, but I'm wondering if it's achievable using viewport height instead? Specifically 3 times the viewport height?

For example, currently I can set a fix for 300px where a div is hidden after scrolling past that point. It reappears once the scroll value is less than 300px.

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
if (scroll >= 300) {
    $('.para-hide').hide();
} else {
    $('.para-hide').show();
}

However, my goal is to perform the same function but based on 300vh (3 times the viewport height).

Any recommendations on how to achieve this?

javascripthtmlcss

Answer №1

300vh equals $(window).height() multiplied by three, meaning it can be substituted directly:

if (scroll >= (3 * $(window).height())) {
  $('.hidden-paragraph').hide();
} else {
  $('.hidden-paragraph').show();
}

Answer №2

Access the innerHeight property within the window object:

if (scroll >= window.innerHeight * 3)

Answer №3

Utilize the 

document.documentElement.clientHeight
:

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
var h = document.documentElement.clientHeight;
if (scroll >= 3*h) {
    $('.para-hide').hide();
} else {
    $('.para-hide').show();
}

Alternatively, with jQuery, you can use $(window).height():

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
var h = $(window).height();
if (scroll >= 3*h) {
    $('.para-hide').hide();
} else {
    $('.para-hide').show();
}

Answer №4

The equivalent of 100vh in jQuery: $(window).height()

The equivalent of 100vh in Pure JS: window.innerHeight

Therefore, if you want to achieve 300vh, you can use $(window).height() * 3 with jQuery.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var maxH = $(window).height() * 3;
  if (scroll >= maxH) {
    $('.para-hide').hide();
  } else {
    $('.para-hide').show();
  }

});

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

Nest Bootstrap columns with rows aligned to the right

Trying to design a front page layout for a takeout restaurant. Encountering an issue where the last row doesn't align properly due to a double-height element. Here is the code snippet: <div class="row"> <a class="col-md-3 img-box img-h ...

htmlcsstwitter-bootstrapnestedalignment

Incomplete data retrieval issue encountered during .ajax call

I am having trouble retrieving all 4 key|value pairs from a page that displays an object as text in the body and pre tag. It seems to be missing one pair - any ideas why? Just a heads up, I've tweaked some of the URLs and data in the JSON output for ...

javascriptjqueryjsonajax

Populating Information on a Sideways Chronological Line

I am looking to develop a unique full-screen timeline web application that enables horizontal scrolling, displaying html-and-css-formatted text along with images, videos, and audio files. The timeline will begin at the present date on the right side, allo ...

phphtmlmysql

Conceal an element within the initial row of the table

Below is the table structure: <table id="mytable"> <tr> <td>name</td> <td> <a id="button1" class="button">link</a> </td> </tr> <tr> <td>name2</td> ...

jqueryhtmlcss

Pressing the Enter key will result in data fetched from JSON being logged multiple times

I am currently implementing a search feature on my React website. When a user enters a keyword in the search input, the keyword is matched in a JSON file. If a match is found, it logs "yes" to the console; otherwise, nothing is logged. Here is an example ...

javascriptjsonreactjsjsx

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

Ways to activate onChange multiple times for a single item within material ui's autocomplete feature

I am utilizing the autocomplete component in the Material UI. Upon selecting an item, the onChange props are triggered and certain actions are performed. However, I am encountering an issue where I can select the same object multiple times without the on ...

javascriptreactjsautocompletematerial-ui

Guide to connecting data from the backend to the frontend in the select option feature using Angular 9

I have a backend system where I store a number representing a selected object, which I am trying to display in a select option using Angular. Currently, the select option only displays a list of items that I have predefined in my TypeScript code using enu ...

javascripthtmlangulartypescript

Determine the character count of the text within an *ngFor loop

I am a beginner in Angular (8) and I am trying to determine the length of the input value that I have created using a *ngFor loop as shown below: <div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id"> & ...

javascriptangulartypescriptangular-reactive-formsangular8

iOS: Incorrect element is currently being scrolled by the user

I encountered an unusual scrolling problem on iOS (7 or 8) while browsing www.cahri.com/tests/scroll How can you replicate this issue? Visit the example page on your iPhone/iPad/iOS Simulator in landscape mode Use your right thumb to touch and scroll th ...

ioscssscroll

determine if the req.params parameter is void on an express route

Hi everyone, I'm a beginner with node and express and could really use some guidance. I am currently attempting to create a get request that checks if the req.params.address_line is empty, and then performs an action based on that condition. However, ...

javascriptnode.jsexpress

Tips on extracting information from a list of website links

I have been working on a project to extract information from various websites and store it in a JSON file. The desired output format is as follows : [ { "title": "Python developer", "place": "Slovensko ...

pythonhtmldictionaryweb-scrapingbeautifulsoup

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

javascriptjquerycsscolors

User information in the realm of website creation

Can someone provide insight on where user data such as photos, videos, and posts is stored? I doubt it is saved in an SQL database or any similar system. ...

javascripthtmlmysqlnode.jsdatabase

Ways to display a div based on the value quantity

Is it possible to display a div based on the value provided? Check out my code on Fiddle! jQuery(function () { jQuery('#btn_test').click(function () { $(this).parent().children('#test_inner').slideToggle('500' ...

jqueryhtmlcss

Function is never called by SetTimeout

Attempting to simulate a long running operation using a loop, like this: var x, y; x = true; y = false; while (x) { if (!y) { setTimeout(function() => { x = false; }, 1000); y = true; } } Wondering why the l ...

javascript

What could be causing my component to not recognize a change in props?

I've been following the steps correctly, but I can't seem to figure out what's missing. Any assistance would be greatly appreciated. Thank you. function Application() { let pageData = "data saved in the database"; return ( <div ...

javascriptreactjs

How can I prevent 401 unauthorized errors from appearing in the console?

I am facing an issue with a Vue.js function that sends data to the back-end for user login. When the user doesn't exist, it returns a 401 unauthorized error. While I can handle this error, it keeps getting logged in the console. Is there a way to prev ...

javascriptvue.js

Creating a 10-digit unique value can be achieved with either meteor or JavaScript

I am in need of generating 10 character unique codes, containing both letters and digits, to be utilized for system generated gift vouchers. Currently, the code I am using includes 13 numbers. var today = new Date(); Number(today); Is there a different m ...

javascriptmeteor

Display the closest locations on the Google Maps interface

I am currently working on a project that involves integrating Google Maps. The project includes storing hospital addresses (in longitude and latitude) in a database. However, I need assistance in displaying the nearest hospital from my current location. I ...

javascriptjquerygoogle-maps