I have a specific resolution in mind where I want to run jQuery code during window scrolling

I have a jQuery code that I want to run only when the resolution is greater than 950px. If not, I risk losing the responsive logo. My goal is to create a navigation bar similar to the one on the Lenovo homepage.

$(document).ready(function(){
    //left side menu functions End
    //Logo function
    $(document).scroll(function() {
        if ($(document).scrollTop() < 25) {
            $("div.logo").height(200);
            $('div.logo a').css('background-image', 'url(img/logo-clear.png)');
        } else {
            $("div.logo").height(50);
            $('div.logo a').css('background-image', 'url(img/logo-sm.png)');
        }
    });
});
javascriptjqueryhtmlcss

Answer №1

Instead of modifying the CSS directly, you can dynamically add and remove CSS classes like shown below.

$(document).ready(function(){
    $(document).scroll(function() {
if(window.innerWidth > 950){
        if ($(document).scrollTop() < 25) {

$('.logo').addClass('logo-clear');
        } else {
$('.logo').removeClass('logo-clear');
        }
}
    });
});
body{
height: 150vh;
}
.logo{
background-color: green;
width: 500px;
height: 500px;
}
.logo a{
height: 50px;
}

.logo.logo-clear{
background-color: yellow;
}
.logo.logo-clear a{
height: 200px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="logo">
<a href="">hello</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

Please note that additional CSS has been included for visualization purposes. You can also view it on this link

Answer №2

To incorporate your code effectively, place it within an if statement that verifies the window's width (if ($(window).width () > 950))

    $(document).ready(function(){
        // Functions for left side menu completion
        // Update Logo functionality
        $(document).scroll(function() {
            if ($(window).width () > 950) {
                if ($(document).scrollTop() < 25) {
                    $("div.logo").height(200);
                    $('div.logo a').css('background-image', 'url(img/logo-clear.png)');
                } else {
                    $("div.logo").height(50);
                    $('div.logo a').css('background-image', 'url(img/logo-sm.png)');
                }
            }
        });
    });

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

Breaking down an object's data in a React component

I need to figure out how to properly extract variables and props from this code snippet: const MyComponent = (props, {data}) => { return ( <div data-set={props["data-set"]}> {data.name} </div> ) }; ...

javascriptreactjsdestructuring

Automate Zoom join function with the help of puppeteer

Having trouble joining a Zoom meeting using Puppeteer, my code is not capturing the password field. Can anyone assist? Here is my code snippet: const puppeteer = require("puppeteer-extra"); const StealthPlugin = require("puppeteer-extra-plu ...

javascriptnode.jsautomationpuppeteerzoom-meeting

The jQuery Modal Dialog functions properly on the initial page load, but fails to work on subsequent pages unless manually refreshed

So, I've encountered an issue with my jQuery modal dialog. It's set up to remind non-registered users to sign up when they try to access user-only actions. Oddly enough, the dialog functions perfectly after a page refresh on THAT specific page. H ...

javascriptjqueryruby-on-railsdialogmodal-dialog

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

javascriptangularjsasynchronous

I'm having trouble viewing my display:table-cell content because Internet Explorer is hiding it

I am attempting to align an icon vertically centered and far right inside a container. I currently have code that achieves this using ::after and table-cell properties. However, the content does not display in Internet Explorer. If I remove the display:tab ...

cssinternet-explorercss-tables

Is it necessary to remove event bindings and disable plugins before navigating away from a page in Jquery Mobile or Jquery?

I've incorporated multiple plugins into a Jquery Mobile website and am searching for the most effective method to "tidy up" when transitioning away from a page that remains in the DOM. The question at hand is whether I should attempt to unbind/off/un ...

jqueryjquery-pluginsjquery-mobileevent-handling

Limit input to numbers only in Semantic UI React Form Field

I've developed a custom CurrencyInput React component for users to input numeric values. I set the input type to "number", but unfortunately, this only seems to function properly in Chrome (as Firefox still allows non-numeric entries). Here is the co ...

javascriptreactjstypescriptsemantic-ui-react

jQuery - patience is required until all elements have completely faded away

I am facing a unique challenge: I need to trigger an action after two specific elements have been faded out simultaneously. The code snippet for this task is as follows: $("#publish-left, #publish-right, #print-run").fadeOut(function(){ //do something ...

javascriptjqueryhtml

Display a dropdown menu when hovering over with a delay

I recently created a basic navigation menu with dropdown functionality using CSS3 initially, but I decided to enhance it by incorporating jQuery to display the dropdown after a set timeframe. However, I am facing an issue where all dropdowns appear when ho ...

javascriptjquerydrop-down-menunavigationtimeout

Importing GeoJSON data into Meteor's Leaflet

Recently diving into Meteor, I am on a mission to create my own customized version of this impressive example from leaflet incorporated into Meteor: Interactive Choropleth Map The implementation requires the use of this GeoJson Data file: us-states The o ...

javascriptjsonmeteorleafletgeojson

What is the best way to create a gap between two Bootstrap buttons?

I'm attempting to create two buttons in the same line in this code, but it's not working as I want. Take a look below: <div class="w3-show-inline-block"> <div class="w3-bar"> <button class="btn btn-s ...

htmlcssbootstrap-4w3.css

Navigating Angular: Discovering Route Challenges in Less Than an Hour

Can someone take a look at my code and help me out? I'm trying to learn Angular.js by following the popular Angular.js in 60 minutes video tutorial, but it seems like things have been updated since then. I'm having trouble getting my routes to wo ...

javascriptangularjsangularjs-controllerangularjs-module

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. https://i.sstatic.net/aSsrC.png Could you assist me in achieving this? Thank you! HTML: &l ...

htmlcsscontainerspositioningabsolute

Spinner loading - stays centered on screen even when scrolling up or down

<div id="Dvloading" style="float: left;"> <i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i> </div> This code displ ...

javascriptjqueryhtmlcssasp.net-mvc

What could be causing my screen reader to repeat lines?

I have this HTML structure: <button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score"> <span ng hide="hideConditional()" class="font-white">score</span> <span ng-show= ...

htmlangularjswai-ariascreen-readers

How to retrieve the $0 element using Python Selenium

There is an unnamed element I can only access with a dollar sign: console.log($0); "100" In Python Selenium, how can I retrieve this element? I attempted the following: my_value=driver.find_element(By.NAME,"$0") However, it resulted i ...

javascriptpythonseleniumelement

Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request. <div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div> This is the div ...

javascriptjqueryhtmlcssajax

How to prevent uncaught errors when checking for undefined in if statements and dealing with undefined items

It appears that there are not many oboe tags being used on SO, but any assistance with this general JavaScript question regarding handling uncaught errors for undefined would be greatly appreciated!~ I am currently utilizing Oboe.js to stream data to a we ...

javascriptnode.jsmongodbmongodb-atlasoboe.js

Working with jQuery: Retrieving the ID of an element that is generated dynamically

Looking for some guidance: I'm working on dynamically creating a table based on the response from an AJAX call. The table includes headers and rows, with new rows added using the "after" function. However, I'm facing an issue with accessing the ...

javascriptjqueryhtmlajax

The Node.js server seems to be continuously loading without producing any output

I've been struggling with getting my server to function properly. Whenever I send post data, the page just keeps loading and doesn't display any results. Here is a snippet of my Node.js file: var http = require('http'); var url = requi ...

javascriptnode.jspostdata