top-sticky and logo visibility

Struggling with an issue related to displaying a logo in a sticky header. The menu works, but need the logo to shrink when header is sticky.

https://i.sstatic.net/jDNsb.png

This is what I need:

https://i.sstatic.net/szzRC.png

My current code snippet:

.navbar {
  background-color: #fff !important;
}

.navbar .navbar-nav li a {
  color: #b29b72 !important;
}

/* More CSS code here */


<!DOCTYPE html>
<html>

<head>
  <title>Title</title>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</body>

</html>
htmlcssbootstrap-4

Answer №1

To create a dynamic logo transition effect on scroll, you will need two logos - one large for standard view and the other small for use in navigation. In order to achieve this effect, you can implement the following JQuery code snippet into your project. Make sure to replace the class names with your actual class names.

$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      if(!logo.hasClass("sml-logo")) {
        logo.hide();
        logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
      }
    } else {
      if(!logo.hasClass("lrg-logo")) {
        logo.hide();
        logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
      }
    }

});
});
.wrapper {
  height: 2000px;
  position: relative;
  background: green;
}

header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: grey;
}

.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background: red;
}

.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
  <div class="lrg-logo">Logo</div>
</header>
</div>

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

Showing an image from a local directory in a JSP页面

I am currently working on displaying an image through JSP. The image is stored in a local path, so I have created a servlet to retrieve the image. In the src attribute of the image tag, I am providing the servlet name and image path as parameters to the se ...

javahtmlimagejspservlets

Opening the Gmail app from a link using JavaScript

What is the best way to open the Gmail app from a hyperlink? This link opens WhatsApp <a href="https://wa.me/">whatsapp</a> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1f190f ...

javascripthtmlreactjsangular

Audio in A-Frame does not function properly when in VR mode

My friend and I are collaborating on a small project involving a VR simulation that requires audio instructions. While everything functions smoothly in the web version and even on mobile devices, we encountered an issue when switching to VR mode on mobile ...

javascripthtmlaframe

Add a Page to Your Domain Name using the Text Input Box

I'm looking to create an input field that allows users to enter a text string, which will be added to a domain name when submitted, redirecting the user to a specific page. Here's how the process works: The user enters 'foo' into the ...

javascripthtmlforms

Custom HTML form created by Ryan Fait with additional unique elements

My current script for styling checkboxes and radiobuttons is working perfectly: The issue arises when I dynamically add checkboxes and radiobuttons to the page using jQuery. The new elements do not inherit the custom styling. Is there a workaround for th ...

javascriptjquerycssinput

modifying button depending on the state of bootstrap collapse

I'm currently utilizing Bootstrap in my project. Here is the snippet of HTML code I have: <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section" onclick=" ...

javascripthtmljquerycssfrontend

Enhanced Fancybox Version 2 adjusts iframe width to fit content

I have been attempting to adjust the width of the iframe in fancybox v2 to fit my content properly. However, every time I try, the content appears too large within the iframe and requires horizontal scrolling to view it all. My goal is to see the entire wi ...

javascriptjquerycssiframefancybox-2

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

An interesting scenario arises with this Div that contains user messages, where the newest message always appears at the bottom of the Div and triggers a scroll bar if the message count exceeds the height of the div: <div class="list-group-message" s ...

javascriptjqueryhtmlajaxautoscroll

How to style the background color of the selected option in a <select> element using

Is there a specific style I can use to change the color of a selected option in a dropdown menu? For example: <HTML> <BODY> <FORM NAME="form1"> <SELECT NAME="mySelect" SIZE="7" style="background-color:red;"> <OPTION>Test 1 &l ...

javascripthtmlcss

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

Interacting between frames with jQuery

I have main_page.htm with the following frameset structure: <frameset rows="30,*" frameborder=0 border=0> <frame name="top_frame" src="top.htm"> <frame name="bottom_frame" src="bottom.htm"> </frameset> The content in ...

javascriptjqueryhtmlframe

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am currently working on a small Next.js project and facing an issue where the initial load time is excessively long. Whenever I click on a link to navigate to a page like home/product/[slug], it takes around 12 seconds to load due to compiling over 2000 ...

javascripthtmlreactjstypescriptnext.js

Modifying the color of the Payment Button in a Stripe Pop-up

I have successfully implemented the Stripe payment method on my leadpages, and everything is functioning well. However, I would like to customize the color of the Pay button to match the design in the attached image. https://i.sstatic.net/4mDrH.png Below ...

jqueryhtmlpopupstripe-payments

Leveraging the browser's built-in validation error messages in Angular for HTML forms

Is there a way to incorporate browser's native HTML validation error messages into Angular applications? https://i.sstatic.net/J0em4.png What I am looking for is the ability to leverage the built-in error messages when working with reactive forms li ...

htmlangularvalidationconstraint-validation-api

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss

Sharing HTML files with the public on AWS S3

My goal is to enable public users to effortlessly view HTML files stored on an AWS S3 bucket through their web browsers. These HTML files are generated and uploaded to my S3 bucket using node.js, resulting in a unique URL link for each file. The following ...

htmlnode.jsamazon-web-servicesamazon-s3permissions

I am trying to set a background image specifically for one page in my application, but I am struggling to make it work. As a newcomer, I am still learning how to

I've been working on the code for a login page, but I'm having trouble setting a background image for the page. I know how to set it for the whole application by modifying the app component, but when I try to do the same for this specific compone ...

javascriptcssnode.jsreactjsreact-redux

Issue encountered while submitting form on JQuery Mobile framework

Currently, I am in the process of developing a small web application utilizing JQuery Mobile and Multi Page architecture. The issue arises on my form as the second page. Upon clicking the submit button, an error message is displayed on my console (error i ...

javascriptjqueryhtml

Is it possible to submit forms in MIME format?

I've been attempting to send a form via email in MIME format, but I've run into an issue where the input tags are replaced with square brackets. For example: < input type="submit" value="Submit" class="button"/> ==> [Submit] I tried u ...

html

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova