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

When employing UI-Router, custom directives may not function properly within nested views

I was developing an angular application using phonegap, ionic, and angular. I had created a custom directive that registered an event listener for the element to activate iScroll upon loading. Initially, the directive worked perfectly when all the views we ...

javascriptangularjsangular-ui-router

Prompt triggered within AJAX request

I am facing an issue with my ajax call in which I am trying to invoke a php function containing an alert. However, the alert is not getting triggered and instead it returns me the JavaScript code (visible inside the console). How can I successfully use an ...

javascriptphpjqueryajax

The React Component is not displaying any content on the webpage

I developed a Reactjs application using the create-react-app. However, I am facing an issue where the components are not displaying on the page. I suspect that App.js is failing to render the components properly. Take a look at my code: App.js import R ...

javascriptreactjscreate-react-app

Automatically activate a button when it comes into view while scrolling

I am currently working in Joomla, which makes it challenging to create a fiddle, but here is the concept: My website displays a mosaic grid of 12 articles upon loading, along with a 'Load More' button. When this button is clicked, an additional ...

javascriptjqueryhtml

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Three.js version r85 While using raycasting in Three JS, a list of points is generated, and I am interested in identifying the point closest to the cursor. It appears that the first point returned is typically the one nearest to the camera. Is there a me ...

javascriptthree.js

Utilizing Bootstrap CSS within Vue's scope

I'm attempting to integrate Bootstrap into a Vue component while ensuring that all CSS is scoped. My initial approach was as follows: <style scoped> @import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css"; & ...

csstwitter-bootstrapwebpackvue.jsvue-loader

The Jquery $.get() method is only delivering a single parameter in the request

Whenever the submit button on my form is clicked, I am looking to intercept the data and send it to an API. However, currently, the code I have only sends the first parameter (Id) and not the others. $('#myForm').submit(function (e) { e.p ...

jqueryasp.netajaxapi

What is the process by which browsers manage AJAX requests when they are made across

I have encountered an issue that is puzzling to me, and I suspect it might be due to my misunderstanding of how the browser handles AJAX requests. Just for context, I am using Codeigniter on an Apache server and triggering AJAX requests with jQuery. The b ...

javascriptphpjqueryajaxcodeigniter

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

I am facing an issue with my HTML table that loads data dynamically through a PHP snippet containing SQL queries. There is a Select option and a button on the table to add a new row, which triggers an AJAX procedure to send the data to PHP for insertion in ...

javascriptjqueryhtmlajax

Is it advisable to incorporate both Jquery and AngularJs into progressive web applications?

Currently, I am in the process of constructing a progressive test application. So far, all the tutorials I have come across utilize native JavaScript. My inquiry is whether it is possible to leverage Jquery for streamlined code writing and implement an MVC ...

javascriptjqueryangularjsprogressive-web-apps

Leveraging the power of the Twitter API to integrate real-time tweets into custom code

Looking for an API that can transform a tweet from Twitter into a string format suitable for integration into a program or website. Any recommendations? ...

javascriptjqueryhtmlapitwitter

Nested routes are arranged in the depths and a variety of components appear depending on the path of the

I've encountered a situation where I have deeply nested routes in my routes.js file. The code snippet below shows that depending on the route, I need to render different components. For instance, if the route is for products, I should render the Produ ...

javascriptvue.jsvuejs2quasar-framework

Loading a series of images in advance using jQuery

I have a series of frames in an animation, with file names like: frame-1.jpg, frame-2.jpg, and I have a total of 400 images. My goal is to preload all 400 images before the animation begins. Usually, when preloading images, I use the following method: v ...

javascriptjquery

Displaying a Div element containing dynamically calculated values based on selected options in Angular

As a newcomer to Angular, I decided to challenge myself by building a simple app. Currently, my select options only display the keys of a data object. What I really want to achieve is to show a value beneath the second select box for each team, which displ ...

javascriptangularjs

Unable to locate the element within the Datalist using jQuery by its ID

How can I make the function $('#ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$0$enquire').click(function() { ... } work when clicking on any button within the DataList? I am looking to use JQuery to find the buttons by their ID and trigger t ...

jquerytriggersjquery-selectorsdatalist

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

When I try to access localhost, it directs me to http://localhost:3000/myprofile%20 instead of localhost:/3000/myprofile

Every time I try to log into my profile page with the correct login credentials, I get redirected to http://localhost:3000/myprofile%20, but then receive a 404 error. This is what my code looks like: // Login Route router.post('/login', functi ...

javascriptnode.jsexpress

Flexbox: Distribute remaining space evenly while allowing content to wrap

Is there a method to instruct flexbox items to occupy the available space while wrapping as soon as they become smaller than their content? However, some items have a fixed width percentage. HTML <div class="grid"> <div class="grid__item"> ...

cssflexbox

The Image component in a test within Next.js was not wrapped in an act(...) during an update

After setting up a basic NextJS app with create-next-app and integrating Jest for testing, I encountered an error message stating "An update to Image inside a test was not wrapped in act(...)". The issue seems to be related to the Image component in NextJS ...

javascriptreactjsnext.jsnextjs-image

What is the reason behind the change in style hierarchy when using ':last-child'?

I found myself in a confusing situation where using :last-child is affecting how parent classes are being applied. The task at hand is to style the last element in a list of elements. However, upon using :last-child, the priority of styles shifts and one ...

htmlcss