Element Reveal at Scrolling down within a Range

Thames International

I have coded using jquery and css to reveal my contact form while I scrolling down the page. But I tried to set a range of element display while scrolling. At this time I have only setup the scrolling down and hiding part. Need to develop code for Display this object within 200px - 1024px range only.

Anyone have idea for this. Please send me an answer.

Please see this animated gif: https://gph.is/2RpQrOp 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>

Prajwal

There are few issues with your markup and css.

You are expecting ID to be there in contact form. document.getElementById("sticky") But there isn't one. Either add ID there or get it from class using getElementByClassName
Have proper offset defined. For this snippet to work, I had to set 200 as offset. If you are planning to support multiple resolution, then it is better to get complete document length and then subtract some 200px and use it as offset.
Do not have conflicting changes between in-line and stylesheet styles. document.getElementById("sticky").style.top changes in-line styling where as top: -1000px; is defined from 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/>
<p class="sticky" id="sticky">Contact form</p>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-3

Comments

0 comments

Element Reveal at Scrolling down within a Range

Element Reveal at Scrolling down within a Range

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Inner Loop design for webscrapping

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Removed zsh, but forgot to change shell back to bash, and now Ubuntu crashes (wsl)

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

How to run blender on webserver?

Resetting Value of <input type="time"> in Firefox

Converting a class method to a property with a backing field

Ambiguous use of 'init' with CFStringTransform and Swift 3

Execute ./script.sh with a crontab

How to set tab order for array of cluster,where cluster elements have different data types in LabVIEW?

How to pass data to the ng2-bs3-modal?

Retrieve Element Tag Value XML Using Bash

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

SQL Server : need add a dot before two last character

Making Array From Page Elements in jQuery

Laravel's ORM sync with timestamps doesn't update timestamps

Do animations stop css changes after animation completion?