CODEWITHSUNDEEP
javascripthtmlcss
john2smitian
john2smitian

Reputation: 21

moving div to left on scroll while its child stay fixed

I have a parent div. I want it to moves to left smoothly while scrolling down and moves to right while scrolling up. it has a p tag inside itself and I want the p tag stay fixed while the parent moves. I wrote some codes but its not working at all. the sample codes are on fiddle 

var p1 = document.getElementById('parallax1')

function parallaxbubbles() {

  var scrolltop = window.pageYOffset

  var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100

  p1.style.left = 35 + (scrollamount / 3) - 35 + '%'
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(parallaxbubbles)
}, false)
#parallax1 {
  height: 100px;
  width: 2539px;
  top: 300px;
  position: relative;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
}

#no1 {
  height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="no1">

  <div id="parallax1">
    <h3>This is some text</h3>
    <p>This is some text .</p>
  </div>

</div>

Upvotes: 0

Views: 75

Answers (2)

Maharkus
Maharkus

Reputation: 2898

var p1 = $("#parallax1")

function parallaxbubbles() {

  var scrolltop = window.pageYOffset;
  
  var scrollheight = 100;
  
  var windowheight = window.innerHeight;

  var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100;

  p1.css("background-position", scrollamount + "px");
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(parallaxbubbles)
}, false)
#parallax1 {
  height: 100px;
  width: 100%;
  top: 300px;
  position: relative;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
}

#no1 {
  height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="no1">

  <div id="parallax1">
    <h3>This is some text</h3>
    <p>This is some text .</p>
  </div>

</div>

You had some variables that were not defined. I couldn't really figure out what scrollheightis supposed to be based upon, but when you define the variables that are missing ( scrollheight and windowheight) you get the desired result.

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

You were missing some variables. I guess scrollheight is the window.scrollY . So i have declared the variable like that and the div moves to left when scroll down and to right when scroll up.

The amount of pixels it moves and other custom styling is up to you.

One weird thing in your calculation is that you have 35 + something - 35 . That's useless :) . I removed that.

I wrapped the text inside a container paraContent , which on scroll moves from left equal to the distance the parallax1 div moves to left. So it stays in the same initial position

See below

( i suggest you don't copy code from other sources before you understand how it works and how it can be edited )

var p1 = document.getElementById('parallax1')
var p1text = document.querySelector('.paraContent')

function parallaxbubbles() {

  var scrolltop = window.pageYOffset,
    scrollheight = window.scrollY,
    windowheight = window.innerHeight,
    scrollamount = (scrolltop / (scrollheight - windowheight)) * 100

  p1.style.left = (scrollamount / 3) + '%'
  p1text.style.left = -(scrollamount / 3) + '%'
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(parallaxbubbles)
}, false)
#parallax1 {
  height: 100px;
  width: 2539px;
  top: 300px;
  position: relative;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
}

#parallax1 .paraContent {
  position: relative;
  width: 100%;
}

#no1 {
  height: 1000px;
}
<div id="no1">

  <div id="parallax1">
    <div class="paraContent">


      <h3>This is some text</h3>
      <p>This is some text .</p>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions