Resizing the Logo as You Scroll

I need my logo to shrink when I activate the slideshow, similar to what is shown in the image.

https://i.sstatic.net/WhobD.jpg

However, I'm struggling to get the jQuery code to work. Can someone please demonstrate how I can shrink a logo, like the one shown in the image above, without affecting the adjacent tabs? Once I understand how to shrink the logo, I can adjust the size to suit my preferences.

Below is the code for the navigation bar:

<nav class="navbar navbar-default navbar-fixed-top" style="opacity: 0.8;">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
            <a class="logo" href="School%20Home.html"><img style="padding-left: 100px; height: 120px; width: 235px;" src="https://s24.postimg.org/o3c7li4mt/Screen_Shot_2017-04-18_at_8.15.25_AM.png" alt="Human Rights Council Homepage"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li style="font-size: 12.5px;"><a href="About.html">ABOUT</a></li>
                <li style="font-size: 12.5px;"><a href="United%20Nations.html">UNITED NATIONS</a></li>
                 <!-- More list items here -->
            </ul>
        </div>
    </div>
</nav>

The CSS styles for the navigation bar are included within the code snippet above under the Style tag. Here is the CSS:

I also utilize several stylesheets that define the appearance of the navigation bar:

Here is the jQuery script I am using:

// Your jQuery Script Here
jqueryhtmlcss

Answer №1

Your code currently toggles the class "smaller" on your logo when you scroll. This means that by adding the CSS rule below, you can change the size of the logo image as desired. The original settings are height: 120px and width: 235px.

.logo.smaller img {
    height: 80px !important;
    width: auto !important;
}

It's recommended to adjust padding or other styles for proper positioning. I used !important to ensure this style takes precedence over others.

The jQuery portion can be written like this:

function resizeLogo() {
    /* Define at what point the logo should change size. Here, it changes after scrolling past the navbar height, but you can use a numeric value (e.g., 100) or bind it to an element ID */
    var offset = parseInt($(".navbar").height());
    var duration = 500;
    $(window).scroll(function() {
        if ($(this).scrollTop() > offset) {
            $(".logo").addClass("smaller");
        } else {
            if ($(".logo").hasClass("smaller")) {
                $(".logo").removeClass("smaller");
            }
        }
    });
}

Call the function using:

$(document).ready(function() {
    resizeLogo();
});

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

Increase the value of a number using jQuery

When using jquery to animate a random number increment from 0001 to 1000, the issue arises when reaching the number 0077. The final number displayed is 77 instead of 0077. Is there a solution to ensure the format remains as 0077? Your help is appreciated. ...

javascriptjquery

I require the CheckBox to be repositioned slightly lower

https://i.sstatic.net/xIi8m.png I'm trying to center align the checkbox between the Input and Button elements. I attempted using the "align-center" class in the "form-check" div, but it didn't work as expected. Could someone please provide me wi ...

htmlbootstrap-5

Converting a string to a date type within a dynamically generated mat-table

I am working on a mat-table that shows columns for Date, Before Time Period, and After Time Period. Here is the HTML code for it: <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay" > ...

javascripthtmlangulartypescript

PHP: A guide on validating textboxes with jQuery AJAX

How can I use jQuery AJAX to validate a textbox on focusout? The validation process includes: Sending the value to a PHP page for server-side validation Displaying an alert message based on the validation result I have only impl ...

phpjavascriptjqueryajax

Move the location of the mouse click to a different spot

I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...

javascriptcss

Retrieving HTML using jQuery Ajax POST

While attempting to utilize a jQuery Ajax POST request to fetch an HTML select menu from a PHP script, I encountered a perplexing issue. $.ajax({ type: "POST", url: "books/editions", data: dataString, cache: false, success: function(me ...

phpjqueryajax

Tips for creating a curved shape using fabric.js

I am encountering an issue while trying to draw an arc using a circle with a start and end angle in my code. Here is the snippet I am working with: var circle = new fabric.Circle({ radius: 30, left: 20, top: 20, fill: " ...

javascripthtmlfabricjs

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

htmlcssbootstrap-5

Using the THIS keyword in JQUERY for functions without an action: a guide

Is there a way to dynamically set the widths of table elements based on their parent's data-attribute value? For example, if a parent has percent="10", I want the child element to have a width of 10%. How can this be accomplished? To illustrate, here ...

javascriptjquery

Step-by-step guide for activating a text box when a check box is marked

I'm looking to activate and deactivate two text boxes when a check box is selected. Currently, only one text box is enabled when the check box is checked. How can I modify my code to enable and disable two text boxes based on the check box status? Her ...

javascriptjqueryhtml

Show alerts that automatically disappear after a set amount of time

I have successfully implemented code that displays alerts for a specific period of time, indicated by (alert alert-warning). Additionally, I want to display another type of alert, (alert alert-success), for a certain amount of time, after which the page sh ...

javascriptphpjqueryhtmlajax

Deciding on the proper character formatting for each individual character within the RICHT TEXT EDITOR

After browsing numerous topics on Stackoverflow, I was able to develop my own compact rich text editor. However, one issue I encountered is that when the mouse cursor hovers over already bold or styled text, it's difficult for me to identify the styl ...

javascriptjquerycsshtmlrich-text-editor

Limiting the number of checkboxes selected in a Checkbox Group based on

I am working on a checkboxGroupInput that has 4 options (denoted as A, B, C, D). My goal is to restrict the selection to only 2 choices. The user should be able to pick a 3rd option. In this scenario, only the newly selected (3rd) and previously selec ...

javascriptjqueryrcheckboxshiny

Observing a web page created by a Java Servlet

After receiving the provided code, I attempted to compile it using a customized version of Dr. Java. However, upon attempting to run the code, I encountered an error message stating: "Static Error: This class does not have a static void main method accepti ...

javahtml

Can a CSS class be added to a form_row in Symfony 4 Twig?

Need help with adding a CSS class to the entire form_row in a Symfony 4 twig template! Currently, my code only adds the class to the input tag, but I require it to be added to the parent div container. Here is the current code snippet: {{ form_ ...

htmlcsssymfony4

Setting the height of a child tag: A step-by-step guide

When trying to set the height of a child tag to 100%, I encountered an issue where the height would remain fixed after redirecting to another page, preventing the page from scrolling. Styling for Image 1 body{ background: url("Resources/Cash.jpeg&q ...

htmlreactjsheight

Tips for toggling content visibility in jQuery using multiple radio buttons

When a radio button with the value "true" is selected, it should display a corresponding div below it. If "false" is selected, it should hide the div below it. Here is my current attempt: If TRUE is selected, then show the input field. If FALSE is selecte ...

jqueryradio-buttontoggle

Integrating XML API Requests Using HTML and JavaScript

When there is only one item in the XML document, I want to update my inner HTML with the result of an API call. I have managed to successfully make the API call work when there are multiple items in the XML document (thanks to W3). <!DOCTYPE html> ...

javascripthtml

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

javascripthtml

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Struggling to incorporate div elements and generate graphs with Google charts? The issue arises in the draw function, where attempts to access a div element using document.getElementById() result in null values and an error message stating "container not ...

javascriptjqueryhtmlajaxgoogle-api