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

Tips for navigating the world of hybrid web applications that combine elements of both traditional multi-page applications and single-page

What are some best practices for developing a multi-page application using modern JavaScript frameworks? Multi-page Application In a multi-page application, we utilize multiple templates with "template syntax" to retrieve backend data and handle AJAX (if ...

javascriptangularjsajaxwebpacksingle-page-application

Why does IntelliJ IDEA 2016 show an error for using the [ngSwitch] attribute in this Angular2 template?

Every time I run precommit inspections, I receive a barrage of warnings even though everything seems to be functioning properly. The warnings include: Warning:(8, 58) Attribute [ngSwitch] is not allowed here Warning:(9, 42) Attribute [attr.for] is not all ...

javascriptintellij-ideaangular

Navigate through the DOM to return an image

I have a question about clicking on the image '.escape' and passing back the source of the image '.myimg2' when clicked. Here is my attempt at accomplishing this task: I understand that it involves traversing the DOM, but I am not very ...

javascriptdom

Assistance needed with generating unique IDs in MongoDB

Currently, we rely on MongoDB's built-in ids for all of our unique id generation. However, there are specific cases where we must generate an id for an object before adding it to the database. One potential solution is to create an entry, retrieve th ...

javascriptmongodbnode.js

Issue with highcharts and vue.js: creating a unique chart for displaying measurements

Currently, I am integrating Highcharts and Vue.js simultaneously while incorporating multiple charts on my webpage. As of now, I have successfully displayed data on all the charts without encountering any issues. However, my goal is to assign a special tit ...

javascriptvue.jswebhighchartsarguments

Leveraging PrimeFaces and the p:ajax component, trigger Ajax within an inputText field only when keystrokes lead to changes in the field

I am currently utilizing PrimeFaces and have a p:inputText field that requires updating certain components on the view based on the most recent keystroke within that p:inputText. Below is the code snippet: <p:inputText value="#{customerLController.surn ...

javascriptajaxprimefaces

How to assign attributes to multiple menu items in WordPress without using JavaScript

I'm currently working on adding attributes to each item in my WordPress navbar. Here is what I have at the moment: <ul id="menu-nav-bar" class="menu"> <li><a href="#text">text</a></li> <li><a href="#car ...

javascriptphphtmlwordpressfunction

using post request axios to send parameters

I am looking to make a post request using axios with an object as the payload. employee:{ name: 'test', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d6a606c6461236e6260">[email ...

javascriptvue.jsvuejs2

What is the best way to choose elements based on a specific data- attribute?

Is it possible to utilize contains: within a selector in order to target all elements with a data- attribute, or is there an alternative method for selecting all such elements? For instance, targeting all elements containing "NL" or "UK". ...

jqueryattributesjquery-selectorscontains

The method getManyAndCount() in TypeORM does not include related data in its return result

I'm completely new to TypeORM and NestJs. Currently, I am working on a project where I have an entity called VehicleModel which has a ManyToOne relationship with VehicleBrand. However, when I execute getManyAndCount() on my query, I am puzzled as to ...

javascripttypescriptnestjstypeorm

The onClick function for a button is not functioning properly when using the useToggle hook

When the button is clicked, it toggles a value. Depending on this value, the button will display one icon or another. Here is the code snippet: export const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); c ...

javascriptreactjstypescriptreact-hooksonclick

Confirming the selected value in a dropdown menu

When a user fails to select a value from the dropdown labeled "Select City," I want a validation message to appear saying, "Please Select your City." I attempted the following approach but it did not work: [Required] public IEnumerable<LocationInforma ...

jqueryasp.netasp.net-mvc

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

Guide to calculating word count in javascript while excluding words with only one character

How can I create a JavaScript function to count the words in a textarea, but exclude all single letter words? For example, if the input is "This is a word count," the count should be 4 since the word "a" is excluded. Although I have a basic understanding ...

jquerytextareaword-count

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

cssbackground-color

Problem with Labels Overlapping and Blocking Text Fields

My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times? Prior to engagement: https://i.stack.i ...

cssreactjsmaterial-uilabeloverlay

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

javascripthtmlcss

Loop through the tabs array and display varying views based on conditionals

I am currently working on building tabs and tab panels iteratively to display information, but I am facing issues in getting the desired output. For each name in a list, I need to create a tab and a corresponding tab panel underneath it. For example, the ...

javascriptreactjsmaterial-uiconditional-rendering

Exploring the world of Node.js with fs, path, and the

I am facing an issue with the readdirSync function in my application. I need to access a specific folder located at the root of my app. development --allure ----allure-result --myapproot ----myapp.js The folder I want to read is allure-results, and to d ...

javascriptnode.jsfs