Effortless jQuery Parallax

Question

Effortless jQuery Parallax

Seeking assistance with debugging this jQuery code that manipulates the top margin of an element within a container. The container has a fixed size and overflow set to hidden to create a parallax effect. The parallax effect is functioning properly, but it breaks if the page is reloaded after scrolling even a single pixel. Any suggestions on how to resolve this issue? Below is the code snippet.

// Parallax for Header
$(window).on("load", function() {
    var startingScrollTop = parseInt($(window).scrollTop());
    console.log(startingScrollTop);
    var startingElementTop = parseInt($headerText.css("margin-top"));
    console.log(startingElementTop);
    $(window).on("scroll", function() {
        var currentScrollTop = parseInt($(window).scrollTop());
        console.log(currentScrollTop);
        if (currentScrollTop > startingScrollTop) {
            var scrollDistance = currentScrollTop - startingScrollTop;
            console.log(scrollDistance);
            var parallaxDistance = scrollDistance / 2;
            console.log(parallaxDistance);
            var newElementMarginTop = startingElementTop + parallaxDistance;
            console.log(newElementMarginTop);
            $headerText.css("margin-top", newElementMarginTop + "px");
        } else if (currentScrollTop <= "0") {
            $headerText.css("margin-top", "0px");
        }
    });
});

Your help is greatly appreciated.

javascript jquery css reload parallax

Answer 1

Answer №1

I've managed to solve it, but is there a way I can simplify this further?

//Parallax for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  
  function runParallax() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    
    if (currentScrollTop > startingScrollTop) {
      handleParallaxEffect(currentScrollTop);
    } else if (currentScrollTop <= 0) {
      $headerText.css("margin-top", "0px");
    }
  }
  
  function handleParallaxEffect(scrollTop) {
    var scrollDistance = scrollTop - startingScrollTop;
    console.log(scrollDistance);
    var parallaxDistance = scrollDistance / 2;
    console.log(parallaxDistance);
    var newElementMarginTop = startingElementTop + parallaxDistance;
    console.log(newElementMarginTop);
    $headerText.css("margin-top", newElementMarginTop + "px");
  }
  
  //Run on load
  runParallax();
  
  $(window).on("scroll", function() {
    runParallax();
  });
});

Is it possible to encapsulate the re-used code into a function that can be executed on load, scroll, or any other event handler?

Answer 2

I've managed to solve it, but is there a way I can simplify this further?

//Parallax for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  
  function runParallax() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    
    if (currentScrollTop > startingScrollTop) {
      handleParallaxEffect(currentScrollTop);
    } else if (currentScrollTop <= 0) {
      $headerText.css("margin-top", "0px");
    }
  }
  
  function handleParallaxEffect(scrollTop) {
    var scrollDistance = scrollTop - startingScrollTop;
    console.log(scrollDistance);
    var parallaxDistance = scrollDistance / 2;
    console.log(parallaxDistance);
    var newElementMarginTop = startingElementTop + parallaxDistance;
    console.log(newElementMarginTop);
    $headerText.css("margin-top", newElementMarginTop + "px");
  }
  
  //Run on load
  runParallax();
  
  $(window).on("scroll", function() {
    runParallax();
  });
});

Is it possible to encapsulate the re-used code into a function that can be executed on load, scroll, or any other event handler?

Answer 3

Answer №2

Once again, disregard my previous statement, I have successfully completed it:

for those who are interested:

//Implementing Parallax Effect for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  
  //Function to create parallax effect on scroll
  function parallaxify() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    
    if(currentScrollTop > startingScrollTop) {
      var scrollDistance = currentScrollTop - startingScrollTop;
      console.log(scrollDistance);
      var parallaxDistance = scrollDistance / 2;
      console.log(parallaxDistance);
      var newElementMarginTop = startingElementTop + parallaxDistance;
      console.log(newElementMarginTop);
      
      $headerText.css("margin-top", newElementMarginTop + "px");
    } else if(currentScrollTop <= "0") {
      $headerText.css("margin-top", "0px");
    }
  }
  
  parallaxify(); //Initial execution
  
  $(window).on("scroll", function() {
    //Execute the same code on scroll event
    parallaxify();
  });
});

Answer 4

Once again, disregard my previous statement, I have successfully completed it:

for those who are interested:

//Implementing Parallax Effect for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  
  //Function to create parallax effect on scroll
  function parallaxify() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    
    if(currentScrollTop > startingScrollTop) {
      var scrollDistance = currentScrollTop - startingScrollTop;
      console.log(scrollDistance);
      var parallaxDistance = scrollDistance / 2;
      console.log(parallaxDistance);
      var newElementMarginTop = startingElementTop + parallaxDistance;
      console.log(newElementMarginTop);
      
      $headerText.css("margin-top", newElementMarginTop + "px");
    } else if(currentScrollTop <= "0") {
      $headerText.css("margin-top", "0px");
    }
  }
  
  parallaxify(); //Initial execution
  
  $(window).on("scroll", function() {
    //Execute the same code on scroll event
    parallaxify();
  });
});

Effortless jQuery Parallax

Answer №1

Answer №2

Similar questions

Leveraging kubectl.exe in conjunction with Docker and Node.js

Centralized navigation bar

A peculiar issue is occurring in Vue.js where a value within a v-for loop seems to be losing association with the intended array

what is the significance of the number THREE in the context of Three.js?

Creating dynamic HTML and CSS in ASP.NET: A step-by-step guide

Having difficulty invoking a JavaScript function through PHP

Create a box with borders and divisions using HTML

Issue: The hook call is invalid. In React Native, hooks can only be called within the body of a function component

Assign a value using the select component from Material UI

the content outside of the division is incorrectly formatted

Does CSS positioning change depending on the screen size?

What is the best practice for handling AJAX and API calls within React.js function components?

I am looking to insert the indexes of an array into a table data cell (<td>), with the select options being the array's indexes

What is the best way to toggle between display:none and display:block?

JavaScript anchor scrolling

Programmatically remove a component from the DOM in Vue 3

Issue where the background color remains the same and does not change

Implementing ID-based filtering for an array of objects with React

When sending a POST request, the req.body.someElement parameter is not defined

Is there a way for me to pinpoint the location of an error in React?