The jQuery window scroll event is malfunctioning when the overflow-x property is set to hidden

Recently, I implemented some code to add animation to the navigation bar. Here is what I used:

$(window).on("scroll", function () {
if ($(this).scrollTop() > 20) {
$('.top-menu .navbar').removeClass('remove-nav-move');
$('.top-menu .navbar').addClass('nav-move');
} else {
$('.top-menu .navbar').removeClass('nav-move');
$('.top-menu .navbar').addClass('remove-nav-move');
}
});

After that, I decided to add some CSS styling as well:

html , body  {
overflow-x: hidden;
}

.full-width-bar {
margin: 0 -9999rem;
/* Added negative margin value back */
padding: 0.25rem 9999rem;
background: rgba(0, 0, 0, 0.5);
}

However, I encountered an issue where the overflow-x: hidden; on the body was disrupting the window scroll functionality. Could anyone provide a solution to this problem or suggest an alternative approach? Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

After exhausting all other options, I decided to remove the overflow-x property. Before doing so, I experimented with a script that I came up with:

  var up_wind = 0;

$(window).bind("mousewheel DOMMouseScroll wheel", function (event, delta) {
     console.log(delta);
    if (delta>= 0 && delta != "undefined") {
        if(up_wind != 0){
            up_wind--;
            console.log('Scroll up');
            console.log(up_wind);
        }
    }
    else if(delta != "undefined") {
     if(up_wind >= 0)
         up_wind++;

         console.log('Scroll down');
        console.log(up_wind);
    }

    if(up_wind > 1){
        $('.top-menu .navbar').removeClass('remove-nav-move');
        $('.top-menu .navbar').addClass('nav-move');
    } else {
        $('.top-menu .navbar').removeClass('nav-move');
        $('.top-menu .navbar').addClass('remove-nav-move');
    }
});

I'm hopeful that this will be of assistance.

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

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

javascriptjqueryhtmlcssselenium

struggling with the predictive text feature, need some assistance

Currently, I am utilizing the material-table library and I have made the decision to incorporate a feature similar to Google's "typeahead" functionality. Here is an example of what I am trying to achieve: https://i.sstatic.net/r6jCd.png In order to ...

javascriptreactjsmaterial-ui

Struggling with JavaScript's while loops and if statements :(

I am working on creating a function that will randomly select global variables based on a number and add them to an array. This process will be repeated 5 times for an online 2D game. The idea is to have cards with information that can later be used to pla ...

javascripthtmlif-statementwhile-loopglobal-variables

What is the best way to automatically redirect all direct requests for a swf file to a designated wrapper page for that specific swf object

My goal is to redirect a direct request for mysite.com/object123.swf to mysite.com/wrapper.php?name=object123 and embed the swf object on that page. However, I am encountering an issue with a redirect loop where the embedded swf object redirects to mysit ...

phphtmlapachemod-rewrite

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

htmlcss

Refreshing a React page will lead to props being empty

The situation I am facing is that the code appears to be correct, but for some reason, when the web page loads, this.props.items does not seem to be passed to Item. Strangely, when I attempt to display this.props.items in console.log, nothing shows up. How ...

javascriptreactjs

Tips for incorporating if statements in JavaScript functions to populate tables

After successfully creating a search page that displays results in a table format and allows users to click on specific records to view more details, I now face a challenge in customizing the displayed pages based on the returned data. I am struggling wit ...

javascriptphpmysql

Minimum number of coins required for a specific amount

I need assistance creating a JavaScript/jQuery function to determine the minimum number of coins required to reach a specified total amount. Here is an array object containing different coin values: var coins = [ { pennies: 200, prin ...

javascriptjquery

the present time plus a one-hour situation

I am facing a challenge where I need to dynamically adjust the path based on specific time conditions. In this situation, I will be working with two date variables retrieved from an API: CheckInStartDate and CheckInEndDate. The current system date and tim ...

javascriptangularjs

Uniform Height for Several Selectors

I came across a script on Codepen created by RogerHN and decided to customize it for a project I'm currently working on: https://codepen.io/RogerHN/pen/YNrpVa The modification I made involved changing the selector: var matchHeight = function ...

javascriptjquery

Click event triggered the function, however it was unable to modify the variable in $scope

<!doctype html> <html ng-app> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <script src="script.js"></script> </head> <body> <ul c ...

javascriptangularjs

Best Javascript framework for ASP.NET MVC incorporating razor

Struggling to find the perfect JavaScript framework for ASP .NET MVC and razor? I decided to try out Angular 2, Aurelia, and AngularJS in a demo application. My experience shows that while Angular 2 and Aurelia can integrate with MVC and razor, they are ...

javascriptasp.net-mvcangularrazor

Adding images to your SVG using Bobril is a simple process that can add visual

I have been attempting to insert an image into an SVG using Bobril, but the following code is not functioning as expected: { tag: 'svg', children: { tag: 'image', attrs: { 'xlink:href': &ap ...

javascriptimagetypescriptsvgbobril

Surprising occurrence of page scrolling upward upon clicking a link

I crafted a web page in HTML specifically designed for viewing on an iPad. The layout features an FAQ list with a hover effect applied to each question. In order to trigger the hover effect on the iPad, I had to include a dummy link similar to this: <a ...

htmlhyperlink

Angular not recognizing draggable true functionality

I am encountering an issue with a div element: <div draggable = "true" ng-show="showPullDown" class="topPull stretch" draggable > </div> The draggable=true attribute is not functioning as expected. I have attempted to set it through the co ...

javascriptangularjs

Protractor: Selecting elements using attribute-based syntax in HTML

I need to target these elements: <span class="required" ng-class="{'disabled': saveInProgress}" input-control="{okCallback:setFieldValue, params:['firstName'], title:'First Name', value: person.firstName, validate:{ ...

javascriptangularjstestingprotractorautomated-tests

Deducing Generics in Typescript Functions Without Invocation of the Function

Take a look at the code snippet below; it seems like it should work without any issues. But for some reason, there is an error. Can anyone provide any insights into why this might be happening? Check out the TS-playground link const func_returnsInput = ( ...

javascripttypescript

What is the best way to calculate the total of all first td elements in the first column using jQuery in order to determine the balance in a General Ledger

Here is the data from my current table: Credit Balance 12,000.00 12,000.00 33,000.00 33,000.00 I'm struggling to calculate the total of all credit amounts in the balance column. How can I achieve this using jQuery? This is my current code ...

jquery

To add a span within a contenteditable field, restricting the user from inputting beyond the inserted span

When the user presses the space key, I want an auto input span to appear. However, when I trace them in the devtools, range.setEnd(lasttextnode, 0); and range.collapse() seem to work correctly. The issue arises when the keyboard input is not right. I try t ...

javascripthtmlrangeselectionkeyboard-input

The CSS on my website is causing issues with the recaptcha functionality

Recently, I've been working on a website that requires spam protection for the contact form. To combat this issue, I decided to integrate reCAPTCHA into the form. However, after completing the form and applying the necessary CSS styles, I noticed tha ...

htmlcssiframe