The overflow issue arising from the off-canvas menu is causing a clash with the par

I am currently working on a website project and have encountered a peculiar issue. I am using parallax for background images in two sections of the site. The parallax effect works fine without setting an overflow rule, but when I add it, the parallax effect stops working. The overflow properties are necessary for the off-canvas menu to function properly. I implemented the off-canvas menu code from this source.

The conflicting elements with the overflow are .container and .content-wrap.

html, 
body, 
.container, 
.content-wrap {
  overflow:hidden;
  width: 100%;
  height: 100%;
}
.content-wrap {
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
}

The code for the parallax effect is as follows:

;(function($) {
    $window = $(window);

    $('*[data-type="parallax"]').each(function(){

        var $bgobj = $(this);

        $(window).scroll(function() {

            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
            var coords = '50% '+ yPos + 'px';

            $bgobj.css({ backgroundPosition: coords });

        });
    });
})(jQuery);

All JavaScript code is located in the file main.js. I have tried adjusting the values of overflow by removing and adding them elsewhere, or wrapping all the content in a new element, but have not been successful in resolving the issue.

Answer №1

The issue lies in the fact that you are attaching the scroll event listener to the incorrect element. In this scenario, the scrolling occurs within your content-wrap div, not the browser window. Adjust your code as follows to resolve this problem:

$(".content-wrap").scroll(function() {
    $('*[data-type="parallax"]').each(function(){
        var $bgobj = $(this);      

        var yPos = -($(".content-wrap").scrollTop() / $bgobj.data('speed'));
        var coords = '50% '+ yPos + 'px';

        $bgobj.css({ backgroundPosition: coords });
    });
});

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 preventing special characters from being entered into a Kendo grid input column

Is there a way to prevent users from entering special characters into the description column of my Kendo grid? The column field setup is as follows: { field : "myDesc", width : 200, title : "My Description"} I have attempted the following approach so far ...

The styling for the mat datepicker is not appearing as expected

I am facing an issue with the mat datepicker as its style is not displaying correctly on the web page. I attempted to add the necessary styling to the styles.less file. @import "~@angular/material/prebuilt-themes/indigo-pink.css"; I also made s ...

Can you explain the process for setting the css property text-fill-color in IE and Mozilla browsers, similar to how I set -webkit-text-fill-color for Webkit?

The color displays correctly in Chrome, but how can I make it work in both IE and FF? CSS #Grid td.note div.has-note i { -webkit-text-fill-color: #b4efa8; } ...

The Vuetify v-img component fails to display images when using absolute paths

Having a bit of trouble here: I want to showcase an image using an absolute path in Vuetify with the v-img tag, but for some reason, it's not displaying. I attempted to use :src="require('path/to/img')", but it throws an error saying "This ...

CSS - Positioning a rectangle between two squares

I need help creating a layout with 2 rows of 4 squares, each with a rectangle in the middle of two squares. https://i.sstatic.net/9pWBi.png This is the code I currently have: .main { width: 100%; height: auto; } .square { width: 25%; position: ...

Styling Rules for WebKit Browsers

Is there a method to apply a particular CSS style for a div based on whether the user is accessing the page from a Chrome browser on a Desktop or an Android device? .myDIV{ [if CHROME???] width: 280px; [if ANDROID???] width: 100%; } Seeking guidance on ...

How can I hide or remove the pesky three dots "..." from appearing in any HTML elements?

While working on a project in VueJS, I've noticed that whenever I add a new class to an HTML tag, it displays as class="..." This is something that bothers me, and I'm not sure if it's due to a recent extension I installed or if i ...

Interactivity with SVG clip-path featuring multiple paths through hover events

I have a unique SVG demo image with multiple circles that are clipping an animated GIF. Can we detect hover events for each individual circle as the user mouses over them? For example, the top-left or middle-right circle? Is it also possible to change th ...

The Material UI Grid item shifted upwards as a result of the image loading

While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended: https://i.sstatic.net/i9jeP.png However, upon loading the page, there is a brief ...

What steps should I follow to ensure the top navbar stretches across the entire width of the page?

Is there a way to make the top navbar span 100% of the width? I've tried various methods, such as setting the width to 100% and even using <br> out of desperation. I also came across advice not to use rows with the navbar and attempted to stick ...

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

The issue of not having a label for the chosen filename in a bootstrap 4 upload field has been resolved using the plugin https://github.com/Johann-S/bs-custom-file-input You can utilize "bs-custom-file-input" to showcase the selected filename in the boots ...

Utilizing data binding in AngularJS upon choosing an item from a drop-down menu

I'm new to AngularJS and would appreciate any help on how to accomplish the following task: When I select an option from a dropdown list, I want the relevant information to be displayed in readonly fields. Here is an attachment for reference: https:// ...

Stop the form from being submitted using ajax if there are no values in the form fields

Having issues with a basic form. Struggling to prevent submission when fields are empty. Is there a straightforward way to validate the fields and stop the form from submitting? Below is the HTML form: <form method="post" name="simpleForm" id="simpleF ...

Encountering an illegal invocation error in jQuery

Recently delving into the world of jQuery, I am attempting to call a C# function from JavaScript using AJAX and jQuery. Additionally, I need to pass some parameters while making the call to the C# function. Here is how I am attempting to achieve this: var ...

Tips for disabling text selection when using focus() in Chrome

When I click on the input box, the text gets selected in Chrome but works fine in Firefox. How can I prevent this behavior? Here is my selector: $('.edit').click(function(){ $('input').focus(); }); ...

Could you provide me with a demonstration of cross-domain functionality?

Similar Inquiry: Methods to bypass the same-origin policy Let's consider two domains for this example - "" and "". The first domain "" is generating data in JSON format as shown below: { "str_info": [ { "str_name": "Mark ...

How to create an image overlay in Angular with the help of Bootstrap

As a beginner in web development, I am utilizing Angular in conjunction with Bootstrap for a practice project. My goal is to create a header component and integrate it into my app.component. Within the app.component, I aim to have a background image coveri ...

Having trouble getting the innerHTML update to be triggered by onchange

Hey there, I am looking to tweak my file upload button so that it triggers a change in a specific span, signaling to the user that a file has indeed been selected. <script type="text/javascript"> function get_fileName(fileSelector, fileId) { var ...

Issue with aligning items vertically using CSS and Javascript

I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fa ...

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...