Reducing Image Size for Logo Placement in Menu Bar

Question

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make this image shrink down and transform into a logo on the menu bar when the user scrolls down. What specific "skill" or technique should I use for this effect? Most of the search results I've found demonstrate shrinking the menu bar itself, but I'm looking to shrink an image into a logo instead. I've tried several Google searches using different terms, but have not been able to find the right term for this particular 'skill'. Can someone please assist me in figuring this out?

<div id="menubar">Main Bar Here</div>
<div id="topcontent">
<img src="img.jpg" /> <----this image will shrink up to the menu bar when i scroll down.
</div>

Something like what is shown in this example , where the logo spins up, but I want something additional where it sticks to the menu bar.

Thank you so much for your help!

jquery html css

Answer 1

Answer №1

Give this code a try with a live example available here

<head>
  <script>
  function adjustImageSize(){
    var img = document.getElementById('mainImg');
    img.style.width="50px";
    img.style.height="50px";
  };
  </script>
</head>
<body>

<img id="mainImg" src="your-image.jpg" style="width:100px;height:100px;"></img>
<div style="height:100px;width:700px;border:1px solid black;overflow-x:hidden" onscroll="adjustImageSize()">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</body>

The key here is to trigger a function onscroll of a div and modify the dimensions of your img within that function. In your scenario, you can either replace div with your img, or set your img as a background of the div.

Answer 2

Give this code a try with a live example available here

<head>
  <script>
  function adjustImageSize(){
    var img = document.getElementById('mainImg');
    img.style.width="50px";
    img.style.height="50px";
  };
  </script>
</head>
<body>

<img id="mainImg" src="your-image.jpg" style="width:100px;height:100px;"></img>
<div style="height:100px;width:700px;border:1px solid black;overflow-x:hidden" onscroll="adjustImageSize()">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</body>

The key here is to trigger a function onscroll of a div and modify the dimensions of your img within that function. In your scenario, you can either replace div with your img, or set your img as a background of the div.

Reducing Image Size for Logo Placement in Menu Bar

Answer №1

Similar questions

Setting a constant width for text characters across all devices using CSS and HTML

Ways to display the page's content within a div container utilizing Jquery

A quirky bug with Tumblr's JS/Jquery Infinite Scroll and Masonry feature

Using Three.JS to navigate a 3D cube by utilizing accelerometer data on both the x and y axes

How can I eliminate the time axis in FullCalendar's agenda view?

Creating fixed values in HTML

Switching between different CSS files based on the URL using jQuery or another method

While using the Android Firefox browser, I noticed that the keyboard is causing my screen to shrink in size

Upload file to database and move to new location

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Using AngularJS to populate dropdown options with data from JSON objects

Creating a custom jQuery plugin with an undefined JavaScript function

CSS - using numbers to create dynamic background images

ReserveYourSpot: Effortless Seat Reservation with AngularJS at the Click of a Button [GIF]

Add content to a jQuery element containing table cells at a specific position

Attempting to encourage a user to follow another user and display a notification

Retrieve a PHP file utilizing Javascript or JQuery

Synchronize information between two drop-down lists

Troubleshooting a problem with the interactive YouTube player in Safari

To keep the PHP echo statement inline with the HTML code, simply use the following syntax