As you scroll, a box blocks off half of the screen

Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it.

It's like a social media platform where users enter the site and the is_user_logged_in parameter is loaded - it's a function that checks if a user is logged in (don't worry about this).

I want to create a code where when non-registered users visit the site, they can scroll down to view items on the page. However, as they scroll, at 700px a big white box appears from beneath covering one third of the screen, then at around 1400px, it covers half of the screen, and finally at 2000px it covers the entire screen.

Please disregard the user login concept, I just used that for illustrative purposes. Can anyone assist me with creating this using Javascript?

javascriptjqueryhtmlcss

Answer №1

Experimenting with this code snippet and familiarizing yourself with jQuery can be quite beneficial.

$(document).ready(function() {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 120) {
      $("#up").css("display", "block");
      $("#up").css("top", "300px");      
      $("#up").height($("#content").outerHeight(true));
    } else {
      $("#up").hide("fast");
      $("#up").height(0); 
    }
  });
});
#up {
  width:100%;
  background:white;
  opacity: 0.9;
  position: absolute;
  top:0;
  display:none;
  transition-duration: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<!-- Multiple paragraphs of Lorem Ipsum text here -->
</div>
<div id="up"></div>

Answer №2

I believe this may meet your requirements.

$(window).scroll(function() {
  var scrollPos = $(this).scrollTop(),
    winHeight;
  if (scrollPos >= 700 && scrollPos < 1400) {
    $(".popup").addClass("active");
  } else if (scrollPos >= 1400 && scrollPos < 2000) {
    $(".popup").addClass("active half");
  } else if (scrollPos >= 2000) {
    $(".popup").removeClass("half").addClass("active full");
  }
}).scroll();
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  min-height: 2500px;
  background-color: #ddd;
}

.popup {
  display: none;
  position: fixed;
  width: 80%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 10%;
  background-color: #fff;
  height: 100%;
  max-height: 33%;
  transition: max-height 0.5s ease;
}

.popup.half {
  max-height: 50%;
}

.popup.full {
  max-height: 100%;
}

.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="popup">

  </div>
</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

Issue: Compilation unsuccessful due to an error in the Babel loader module (./node_modules/babel-loader/lib/index.js). Syntax error

I'm currently exploring how to integrate the Google Maps Javascript API into my VueJs project without relying on the vue2-google-maps package (as it seems too restrictive to me). Here's what I've done so far, after registering my Vue compon ...

javascriptvue.js

issue with border color staying the same when focusing

I've been struggling with changing the border on focus in my code. Despite trying various methods, nothing seems to be working. Can someone help me figure out what I'm doing wrong? <input type="text" spellcheck="false" data-placement="top" id ...

htmlcss

How to add a jQuery function to a Rails 3 if statement?

I followed a Rails 3 tutorial on creating a multi-step form which you can check out here. Additionally, I incorporated Stripe payment functionality in my app using another railscast found here. Within my application, the payment form is hidden using jQuer ...

javascriptjqueryruby-on-railsruby-on-rails-3stripe-payments

Conceal the HTML element within a subscription

Currently, I am utilizing Angular and have a checkbox that I need to toggle visibility based on the response of an API call subscription. The issue lies in a delay when trying to hide the checkbox (as it is initially set to visible). My assumption is that ...

htmlangulartypescriptangular-material

What is the best way to implement a jQuery post for a file upload form?

My form has the following structure: <form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data"> <input type="file" id="uploadFile" name="uploadFile" /><br /> <input type="submit" id="process" name="pr ...

jqueryserializationfile-uploadcoldfusion

What is the reason for typescript's lack of a "function" type?

As a newcomer to TypeScript, I'm puzzled as to why I am unable to define an object like this: const obj: { property1: string property2: boolean property3: function } It seems that the only workaround is to use: const obj: { property1: strin ...

javascripttypescriptobjecttypes

Create unique error messages using Vue validators

Two fields named text and email are included in my template. Below is the structure of the template: HTML <!DOCTYPE html> <html> <head> <title>Vue - Validations</title> <script src="Libraries/vue/vue.min.js&qu ...

javascriptvue.jsvalidationvue-validator

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

javascripthtmlcssreactjsflexbox

Add the following code snippet below every second set of two paragraphs that are enclosed within h

I am looking to add Advertisements following the 2nd paragraph in every h2 tag. Here is an example of what I want: <h2>Sub title</h2> <p>1st paragraph</p> <p>2nd paragraph</p> <div>INSERTED AD</div> functio ...

phphtmlparagraph

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

javascriptcssreactjsmaterial-ui

Only the data from the first row will be accepted by jQuery, no other data will be

Encountering a problem with jquery. I have a dynamically created <table>. foreach ($_cards as $_card){ $tabOdd = ""; $statusInd = ""; $counter++; if ($counter % 2 != 0){ $tabOdd = "style='background-color:#eee' ...

jquerybuttoncart

Encountering ENOENT error when accessing view file in NodeJS and Express

I've encountered a strange issue with my nodeJS application after refactoring it. The app launches without any problems, the API responds correctly. However, when I attempt to access "/", I receive the following error: Error: ENOENT, stat '/view ...

javascriptnode.jsexpress

When outputting the $http response in the console, Angular displays null instead of the expected result,

I have encountered a peculiar issue with my local webservice developed using Spring. Everything seems to be functioning correctly when accessing it through the browser or Postman, but for some reason, when attempting a simple GET method with Angular/Ionic, ...

javascriptangularjsjson

Dividing a JSON array by a specific key using lodash underscore

I'm on a quest to extract the distinct items in every column of a JSON array. Here is what I aim to convert : var items = [ {"name": "Type 1","id": 13}, {"name": "Type 2","id": 14}, {"name": "Type 3","id": 14}, {"name": "Type 3","id": 13}, {"na ...

javascriptjqueryunderscore.jslodashtext-processing

The REACT- Popover feature seems to be having trouble showing the data from my json file

Within the menu/ section, the names of my invited guests are not visible; only the InfoIcon is displayed in the cell. My goal is to implement a Popover feature that will show all the information about the invited guests (including their names and locations ...

javascriptreactjsreact-hooksmaterial-uipopover

Leveraging AJAX in Ruby on Rails

In my controller, I have a function that looks like this: def showRecipeIngredients ingredients = RecipeIngredient.where( "recipe_id = ?", params[:id]).all @html = "" ingredients.each do |i| @html = @html + "<p>#{Food.find_by_ndb ...

jqueryruby-on-railsajaxjson

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

I am attempting to integrate d3-graphviz following the guidance provided here within an angular template, like in this example. The tutorial on the d3-graphviz website advises me to include the following code in the index.html file: <!DOCTYPE html> & ...

javascripthtmlangulard3.jsgraphviz

Retrieve TypeScript object after successful login with Firebase

I'm struggling with the code snippet below: login = (email: string, senha: string): { nome: string, genero: string, foto: string;} => { this.fireAuth.signInWithEmailAndPassword(email, senha).then(res => { firebase.database().ref(&ap ...

javascripttypescriptfirebasetypesionic2

An error occurred when attempting to use the getDoc() function from Firebase within Next.js: TypeError - reading 'map' on properties of undefined

Hello everyone at StackOverflow, I ran into a problem while attempting to use .map() on a getDoc() constant in my Next.js application. The error message I'm getting is: "TypeError: Cannot read properties of undefined (reading 'map')". As a n ...

javascriptdatabasefirebasenext.js

Java Library for Converting HTML to Textile Format

I have a requirement to convert a String from HTML format to Textile format. After researching various libraries such as Textile4J, Textile-J, JTextile, and PLextile, I found that none of them offer the specific functionality I need. Although they do prov ...

javahtmltextile