Unveiling Elements as You Scroll Within a Specified Area

I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling down and hiding functionality. I need assistance in developing the code to display this object within the range of 200px - 1024px.

If anyone has an idea on how to achieve this, please share your solution with me.

Please refer to this animated gif: OR https://ibb.co/6y7wCmK


var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (1600 > currentScrollPos) {
    document.getElementById("sticky").style.top = "200px";
  } else {
    document.getElementById("sticky").style.top = "-1000px";
  }
  prevScrollpos = currentScrollPos;
}

/* Test contact-sticky*/
.sticky {
  position: fixed;
  transition: top 0.3s;
  top: -1000px;
  left: 827px;
  right: 46px;
  background-color: #ebc11d;
  padding: 50px;
  font-size: 14px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
<p class="sticky">Contact form</p>
javascriptjquerycsswordpress

Answer №1

There seem to be a few issues with your markup and css.

  1. The contact form is expecting an ID of "sticky", but it is not present. You can either add the ID or retrieve it using the class name using getElementByClassName.
  2. Ensure that you have a proper offset defined. In order for this code snippet to function correctly, I had to set 200 as the offset value. If you plan to support multiple resolutions, it would be better to calculate the total document length and subtract some pixels (e.g., 200px) to use as the offset.
  3. Avoid conflicting changes between inline and stylesheet styles. For example, 
    document.getElementById("sticky").style.top
    changes the inline styling while top: -1000px; is defined in the stylesheet.

var prevScrollpos = window.pageYOffset;
var currentScrollPos = window.pageYOffset;
if (10 < currentScrollPos && 210 > currentScrollPos) {
    document.getElementById("sticky").style.top = "0px";
  } else {
    document.getElementById("sticky").style.top = "-1000px";
  }
window.onscroll = function() {
  currentScrollPos = window.pageYOffset;
  if (10 < currentScrollPos && 210 > currentScrollPos) {
    document.getElementById("sticky").style.top = "000px";
  } else {
    document.getElementById("sticky").style.top = "-1000px";
  }
  prevScrollpos = currentScrollPos;
}
/* Test contact-sticky*/

.sticky {
  position: fixed;
  transition: top 0.3s;
  background-color: #ebc11d;
  padding: 50px;
  font-size: 14px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p class="sticky" id="sticky">Contact form</p>

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

Rails ajax is not providing the expected JSON format in the response

I've been experimenting with ajax to retrieve data from my controller. However, the json response I'm receiving is not what I expected. There might be a routing conflict causing this issue, but I'm uncertain. This is my controller setup: ...

jqueryruby-on-railsajaxruby-on-rails-4.1

Using Angular to display asynchronous data with ngIf and observables

In cases where the data is not ready, I prefer to display a loader without sending multiple requests. To achieve this, I utilize the as operator for request reuse. <div class="loading-overlay" *ngIf="this.indicatorService.loadingIndicators[this?.indic ...

javascriptangulartypescriptrxjsobservable

What is the best way to conceal a sticky footer using another element?

I have a footer that remains fixed at the bottom of both long and short pages. Below is the CSS code for this footer: .footer{ position: absolute; bottom: 0; width: 100%; height: 100px; background-color: white; } My goal is to achieve a 'r ...

jqueryhtmlcssruby-on-rails

How do I reduce the size of a WinJS image file

Can anyone help me figure out how to retrieve the size (in pixels, bytes) of a picture in a Windows 8 app? I'm using openPicker to select the file but can't seem to find the size attributes. I want to display an error message if the file is too ...

javascriptwindowswinjs

Tips for eliminating unnecessary or duplicate dependencies in package.json files

While I am aware that this question has been asked previously on Stack Overflow, I have found that depcheck does not work effectively for me. It provides numerous false alerts and requires specific configuration for libraries like babel, eslint, etc. How ...

javascriptnode.jsreactjsnpmyarnpkg

Apply the class to only the particular child element when hovered over, without impacting any other divs that share the same

Currently, I have a grid of images set up using bootstrap. When hovering over the images, they enlarge slightly and change opacity. However, this effect applies to all the icons in the grid. While I understand that giving each icon its own ID could fix thi ...

jqueryparent-childjquery-hover

The Laravel function is not returning as expected on the server

I'm facing an issue with my Laravel project. When the validator fails, the return back function works fine on localhost but on the server it redirects to the root URL. Can anyone help me resolve this problem? Here is my controller code: public functi ...

javascriptphplaravel

How can you automate clicking a button and then performing a specific action through code?

In my current coding project, I am attempting to automate the process of clicking on a tab through a script in order to reveal additional divs on the webpage. Once these divs are revealed, I need to perform certain actions on them. My code currently looks ...

javascriptjquery

Is sending an AJAX request to a Node.js Express application possible?

Currently, I am attempting to authenticate before utilizing ajax to add data into a database $('#button').click(function () { $.post('/db/', { stuff: { "foo" : "bar"} }, callback, "json"); }); Below is my node.js code: ...

javascriptajaxnode.jsexpress

What happens when a browser can support multiple versions of a font - which one does it choose

If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...

htmlcssfontsfont-face

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...

htmlcss

Troubleshooting issues with the Select List component in ReactJS

Having an issue with the select list as the onChange event is not triggering. Struggling to set the selected value from the list in the this.state variable. Any assistance on this matter would be greatly appreciated. class SelectActivity extends React.C ...

javascriptreactjs

Creating a Timetable Interface; which plugin or tool should I use for this project?

Here is a concept I am looking to develop... I am struggling with the layout using only css/js ... Is there a jquery plugin or tool that could assist with this? Would this be considered a reverse orientation calendar? Starting from scratch has proven to ...

jqueryweb-applicationslayout

Guide to refining a JSON array using a pre-established list

I'm in need of assistance figuring out how to accomplish the following task: Below is the code snippet I am working with: public class Data { public string FirstName; public string LastName; public int Age; } var data = new Data { //this objec ...

javascriptc#json

Upgrading React Native hot reloading leads to a complete reload of the application

Recently, I updated my React Native app from version 0.48 to 0.55. Unfortunately, after the upgrade, hot reloading stopped functioning. Any modifications to the files now trigger a complete reload of the app. I have attempted clearing all cache related to ...

javascriptreactjsreact-native

My controller is not recognizing the DELETE $.ajax call - what could be causing this issue?

I've encountered an issue while attempting to delete an entity using AJAX. I have the following controller method: [HttpDelete] public ActionResult Delete(int id) { //Deletion logic return Content("OK"); } Within the view, my AJAX call looks ...

c#jqueryajaxasp.net-mvc-4

Capture audio using a web browser

Currently working on a project to create a platform for recording sounds. I'm aiming to incorporate a meter that measures the volume of the sound. Despite extensive research, I haven't been able to discover an HTML5 solution compatible with all b ...

jqueryhtml

Problem with MongoDB - increasing number of connections

I have encountered an issue with my current approach to connecting to MongoDB. The method I am using is outlined below: import { Db, MongoClient } from "mongodb"; let cachedConnection: { client: MongoClient; db: Db } | null = null; export asyn ...

javascriptnode.jstypescriptmongodb

Transferring a row name from PHP to AJAX using jQuery - the complete guide

In my current project, I have a table that displays details fetched from the database. if(mysql_num_rows($sql) > 0) { $row_count_n = 1; while($rows = mysql_fetch_assoc($sql)) { extract($rows); $options1 = select_data_as_options( ...

javascriptphpjqueryajax

CSS will only be visible if it is enclosed within the <style> tag

While creating a view, I noticed that my CSS is not being displayed unless it's placed inside a <style> tag. I've tried using !important without success, as well as utilizing the selector .container-fluid > .row > .d-flex > .out_pr ...

cssbootstrap-4