Reducing the size of header logo when scrolling on mobile devices

Struggling to find a solution for implementing a sticky header on our mobile Shopify site that shrinks the header logo when scrolling down and returns it to its original size at the top. If this also reduces the entire header size, that would be fine!

Previously attempted code caused issues with the logo not resizing properly when scrolling back up, resulting in strange behavior on different pages.

$(window).scroll(function(){ 
if ($(this).scrollTop() > 10){      
$('.site-header__logo-image img').addClass("manage_width");
  } 
else{
//revert to default styles
$('.site-header__logo-image img').removeClass("manage_width");
 }
});

Various attempts using JS, CSS, and HTML have failed to yield results. Any assistance with code specifically designed for mobile application would be greatly appreciated! Thank you!!

javascripthtmlcssscrollheader

Answer №1

If you're looking to modify the size of a logo based on user scrolling behavior, you'll need to implement an event listener in JavaScript to track when the user is scrolling.
One way to achieve this is by adding a new class to the logo element as the user scrolls.

It's also necessary to detect when the user reaches the top of the page so that you can revert the logo back to its original size.
Here is an example of what your code could look like:

CSS

.logo {
  width: 200px;
  height: 100px;
}

.logo--small {
  width: 100px;
  height: 50px;
}

JavaScript

// get reference to the logo element
var logo = document.getElementById('logo');

// listen for scroll events
window.addEventListener("scroll", function() {
  // add small size class when user scrolls
  logo.classList.add('logo--small');
  // check if user has scrolled to the top and remove small class if present
  if (window.scrollTop == 0 && logo.classList.contains('logo--small')) {
        logo.classList.remove('logo--small');
    }        
});

You can enhance the user experience by applying CSS transitions to the class and implementing logic to adjust the logo size based on whether the user is scrolling up or down, rather than just resizing it when reaching the top of the page.

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

Positioning Bootstrap footer vertically in HTML

Having trouble with aligning the left text and custom styled button to the right and top of the checkout button, despite using various codes like float:right, margin-left, position relative/absolute. Shifting the button also didn't work, so now consid ...

htmlcssbootstrap-modal

The dynamic map for customer engagement

Creating an interactive custom vector map of the UK with animated locations might sound complicated at first, but that's exactly what I'm trying to accomplish. The map showcases various landmarks throughout the country, and I want users to be abl ...

javascriptjqueryhtmlcssdictionary

JavaScript for validating forms in PHP

Hey everyone, I'm struggling to understand why the alert box isn't showing up when I run this code. I'm new to programming and find HTML easy, but I'm currently in a PHP class where we have been tasked with creating and validating a for ...

phpjavascriptforms

Observing the completion of a subscriber function

Is there a more streamlined way to determine if the subscriber has finished executing or return something and catch it up-stream? Consider the following code snippets: this._subscriptions.push(this._client .getCommandStream(this._command) // R ...

javascripttypescriptpromiserxjsobservable

The .ajax() method is having trouble sending data to a PHP database query

Dealing with a persistent issue here. Grateful for all the assistance so far, but I've hit another roadblock. My .ajax() function just won't run. Strangely, the .click() doesn't work unless I have if(field != text) before my .ajax() call, bu ...

javascriptphpjquerymysqlajax

Short-circuiting async flows on non-error events in Node.js

Node implements the CPS convention for callbacks. Typically, when a function encounters an error, it is common practice to either handle the error or callback the error to the parent function by utilizing something like return cb(err). One challenge I fac ...

javascriptnode.jsasynchronous

Display a fresh state using React Router

I'm currently facing an issue with trying to update the title value in the state based on the router input. Despite having proper code compilation, the title remains an empty string. Can someone help me figure out why this is happening? class Header ...

javascriptreactjsreact-router

Adding dynamic values to nested form groups in Angular Form Array

After following a tutorial on creating a reactive form in an Angular application, I managed to implement it successfully. However, I encountered an issue when trying to add an additional control called "setNumber" to the form array. I want this control to ...

javascriptangulartypescriptformsangular-reactive-forms

Adjust parallax scrolling by reducing the height of the container to align with the transform gap

In my current web design project, I have a unique arrangement of elements on the page. Each element's position is controlled via a CMS, which assigns specific values such as width, top position, left position, z-index, and 'speed'. The &apo ...

javascriptjqueryparallax

Stop the automatic resizing of a bootstrap card containing an image when the text within the card is lengthy

How can I keep the height of a card containing an image fixed, while allowing the text inside to be wrapped and shortened if necessary? https://i.sstatic.net/r5HNG.png <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/ ...

htmlcssbootstrap-4

Extracting multiline value from a textarea using JavaScript

I'm trying to extract a multiline value from a textarea using JavaScript or jQuery and store it in a cookie. Below is the code snippet I am using: HTML: <textarea id="cont" cols="72" rows="15"> JavaScript: var txt = $('#cont').val( ...

javascriptjqueryhtmlcookies

Transition to the designated channel after submitting the modal on Slack

My current implementation involves using a Slash Command to trigger a new Modal view, with the app only listening to view_submission events. The modal is designed to collect user responses from 2 static_select elements. Given the channel_id and team_id v ...

javascriptnode.jsslackslack-apislack-commands

I'm wondering how I can design a utility function within my Redux module that can extract a specific subset of read-only data from the current state

I am currently utilizing redux to create a "helper function" inside my redux module that is responsible for fetching filtered data from the state based on a specified index. This specific data will be used to generate a form consisting of inputs depending ...

javascriptreactjsredux

What are the steps to increase the size of the v-stepper-step in Vuetify?

Is there a way to adjust the size of the icon/step circle in v-stepper? ...

cssvue.jsvuetify.jsv-stepper

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

Execute a specific function when the Node.js countdown reaches zero

I am currently working on a web application and I need to incorporate a new function. This function will display a table containing certain results when a user submits a request. If the user does not submit anything, it will show different results as tim ...

javascriptnode.jsmongooseejs

Can a partially see-through front color be placed on top of an image?

My goal is to add a foreground color with opacity over some images within a div, allowing the image to still be visible. I've come across solutions on S.O., like this one, but they don't quite achieve what I'm looking for. Below is my HTML ...

htmlcss

When trying to access the page via file://, the cookies are not functioning properly

My HTML code is functioning properly in Firefox and even on the W3Schools website when tested using their editor in Chrome. However, when I run my code in Chrome from Notepad++, it doesn't seem to work. It appears that the body onload event is not tri ...

javascriptgoogle-chrome

The Group Hover feature in Tailwind CSS seems to only affect the initial SVG element and not any subsequent SVG children within the group

I encountered an issue with TailwindCSS (version 3.2.4) regarding group-hover, where hovering over elements with SVG child elements only seems to affect the first element and not the others. For a demonstration, I have set up an example on the TailwindCSS ...

javascripthtmlcsstailwind-css