The backdrop moving in a reverse direction

I recently made a tweak to this code that successfully moves the background in the opposite direction of the scroll. However, there is now an issue where it leaves a blank space at the top, even when the background is set to repeat. The change I made was simply removing the "-" minus sign from -(scrolled*0.15)+'px').

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.background').css('top',(scrolled*0.15)+'px');
}

While the modified code functions as intended, the problem with the white gap at the top remains. Is there something crucial that I'm overlooking? Any insights would be greatly appreciated!

https://codepen.io/prandam/pen/LYpONZx

javascriptcss

Answer №1

Give this a try:

let bodyHeight = parseInt($('body').height());
let bgTop = -1*bodyHeight;
$('.background').css({
  height: (bodyHeight*2)+'px',
  top: bgTop+'px'
});

$(window).scroll(function(e){
  parallax(); 
});

function parallax() {
  let newTop = bgTop + $(window).scrollTop()*0.15; 
  if (newTop === 0) return;
  $('.background').css('top', newTop+'px');
}

This code should be self-explanatory.

Answer №2

Utilizing background repeat simply allows for an increased height display. Despite this, the element containing the background remains positioned at the top of the page. The initial top position is set to 0px, resulting in any additional top adjustment creating white space.

To rectify this, adjust the initial top value to -500px. Modify your scroll code to:

 $('.background').css('top',(-500 + scrolled*0.15)+'px');

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

Can inner function calls be mimicked?

Consider this scenario where a module is defined as follows: // utils.ts function innerFunction() { return 28; } function testing() { return innerFunction(); } export {testing} To write a unit test for the testing function and mock the return value ...

javascripttypescriptjestjs

Suggestions for resetting the input field IDs in a cloned div after deletion

In the given HTML code snippet, there is a <div> containing two input fields as shown below: <button type = "button" id = "add-botton" >Add Element </button> <div id = "trace-div1" class = "trace"> <h4><span>Trac ...

javascriptphpjqueryhtml

Changing the border color in a CSS pseudo-class does not take effect upon clicking

Is it possible to change the border color of an input field when clicked using CSS? I attempted to use the pseudo-class focus for this purpose, but encountered some issues. It seems to only work on select elements and not on elements like text inputs. . ...

htmlcssbootstrap-4

Tips for modifying the hue of the hint attribute within vue.js?

`<v-text-field id="loginPasswordId" ref="password" v-model="password" class="login-input" dense :disabled="loading" :hint="hello world" :loading="loading" maxlength= ...

javascriptvue.jsvue-componentvuetify.js

Guide on utilizing Subscribe Observable for performing lookup in Angular

I am new to Angular and seeking guidance as my approach may not be the best. Please advise me on a better solution if you have one. My goal is to display a list of records in table format, retrieved from the database where only Foreign Keys IDs are availa ...

javascriptangular

Tips for working with elements in WebDriver that are created dynamically by JavaScript

As a novice in automation using Java and WebDriver, I find myself facing a particular issue: Browse for a specific customer Select a new customer type from a dropdown menu Click on the Save button Outcome: Upon trying to change the customer, a message p ...

javascriptseleniumwebdriver

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...

javascripthtmlcssangularjs

Is there a way to transform this pledge back into a JSON array format?

My goal with this code is to retrieve a JSON array from my server. var students_list; const library_address = 'http://localhost:17330' async function fetchData(param1, param2) { if(param1 == 'getdata') { const response ...

javascriptnode.jsexpress

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

javascripthtmlangularjs

Issue with array filter not functioning correctly upon page refresh when utilizing vue-router

I have a method (shown below) that functions perfectly when I'm directed from a <router-link>. selectedSpaceObj() { if (!this.selectedSpace) { return {}; } else { return th ...

javascriptvue.jsvuejs2vue-componentvue-router

Encountering an NPM ELIFECYCLE error when attempting to start the node server with the

After following the instructions on deploying test-bot on IBM Watson from this link https://github.com/eciggaar/text-bot, I encountered errors while attempting to deploy the code locally using CLI foundry. My setup includes Node.js version 6.10.3 and npm ...

javascriptnode.jsnpmibm-watsonwatson-assistant

Could you provide me with some information regarding the relationship between screen resolution and screen size?

When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...

htmlcss

The input value fails to update after the method is called

I am working on developing a todo-list application and here is the code I have so far: HTML: <div class="divPadder"> <input ref="makePlaceholderEmpty" class="inputBoxSize" type="text" :placeholder="placeholder"v-model="task"> <ul> ...

javascriptvue.jsv-for

Synchronously retrieving JSON data from a URL using JavaScript

I'm currently working on extracting the title of a YouTube video using jQuery to parse JSON. The issue I am facing is that it works asynchronously, resulting in the answer being displayed after the page has already loaded. Here's the current resu ...

javascriptjqueryjsonsynchronous

Is it possible to create a grid by arranging each statement with a specific format?

After fetching and parsing some data, I have utilized the 'each' function to display it: $.ajax({ url : 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('htt ...

jqueryhtmlcss

Search for specific parameters in an array and retrieve them

I have been attempting to sift through an array of data retrieved from my API, but unfortunately, the data remains unfiltered. I suspect that it might be due to the way I implemented my method or perhaps my params are not being returned correctly. Below ar ...

javascriptreact-native

The angular component cannot be bound as it is not recognized as a valid property

In an attempt to conditionally assign a class based on the value of a boolean variable, I have declared the variable in the parent component: public alteredSidebar: boolean; This is my approach for dynamically setting the classname: <div [class ...

cssangularcomponents

I'm experiencing some strange symbols on my page that look like ''. It appears to be a problem occurring between the servlet and the Javascript. How can I resolve this issue?

After retrieving a CSV file from my servlet, I noticed that characters like 'é', 'á' or 'õ' are not displaying properly on my page. Strangely, when I access the servlet directly via browser, everything appears fine. I atte ...

javajavascriptjqueryjspservlets

Performing function in Vue.js when a change occurs

I recently started developing a Vue.js component that includes an input field for users to request a specific credit amount. My current goal is to create a function that will log the input amount to the console in real-time as it's being typed. Ultima ...

javascriptvue.jsvuejs2

Placing a collection of <a> anchor tags inside a div and making them float

I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <n ...

htmlcss