Transitioning an image from the header to the navigation bar as the user scrolls

As indicated in the title, my goal is to have an image move to a sticky-top bootstrap navbar when scrolling. Below is a sample code snippet:

.mainlogo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* header */

.navbar{
   
    height: 100px;
    background-color: #0D4671;
}
.img{
    display: inline;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">

<div class="container">
    <div class="mainlogo">
        <img src="https://images.pexels.com/photos/1098662/pexels-photo-1098662.jpeg"  alt="" class=" w-100">
    </div>
</div>

<nav class="navbar sticky-top navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="https://images.pexels.com/photos/1098662/pexels-photo-1098662.jpeg" alt="" width="30" height="30" class="logo">
            A Car
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <h1>Loremlorem</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur! Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p>
    <p>... (more lorem ipsum text) ...</p>
</div>
The main idea is to have the car image at the top of the navbar and when scrolling down with the navbar fixed to the top, the image should seamlessly transition to the navbar brand location. Is there a way to achieve this effect? Any pointers or assistance would be greatly appreciated!

Answer №1

To achieve this effect, consider implementing a bit of javascript code. Check if the navbar's offsetTop is 0 and then proceed to move the image accordingly. You can use either the scroll event or for better performance, utilize the Intersection Observer instead.

However, if both images are identical, there may not be a need to move it. Doing so could cause repaints and page reflows, impacting performance negatively. If both images are the same, they will likely be cached, minimizing duplicate requests and overall performance concerns.

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

Using AngularJS to connect multiple elements through ngModel

How can I validate several elements using ng-model and then trigger an action when all are true? Is this achievable? ...

Navigating through routes using the Express framework in Node.js

In the controller, I have implemented the following route methods: getListaUsuarios() { this.app.get("/api/usuario", (req, res) => { this.usuario.getListaUsuarios().then((results) => { return res.status(200).json(results); ...

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

Creating dynamic div containers on the fly

I'm dealing with an issue in my application where multiple overlapping div boxes are being dynamically generated and they all end up having the same content. When I add content to a box, it gets applied to all existing boxes instead of just the last o ...

Is there an appropriate method in Vue/Nuxt for managing and altering component data without using lifecycle hooks?

Scenario: I am dealing with a component that showcases a datatable listing Applications. Upon clicking a row, it triggers the opening of another component with appropriately loaded fields (for new or edit). The Challenge: The component loads a reference t ...

How can one display blog data (stored as a PDF) from a database alongside other different results (stored as

I have successfully displayed a PDF file from my database as a blob using the header("Content-type:application/pdf") method. Now, I am looking to also display some additional string results along with this PDF file. Is it feasible to achieve this while d ...

Is there a way to utilize the 'interval' Rxjs function without triggering the Change Detection routine?

My goal is to display the live server time in my application. To achieve this, I created a component that utilizes the RXJS 'interval' function to update the time every second. However, this approach triggers the Change Detection routine every se ...

Using JavaScript with Wicket's ModalWindow

So here's the scenario: I've opened a ModalWindow and displayed multiple Panels in it by clicking on a button - now I need to apply some JavaScript specifically to one of those Panels. How can I accomplish this? I attempted to add a Behavior to ...

Froth - abundant material splurging

I am facing an issue with a CSS3 bubble that I created. In certain browsers, like Windows Safari 5.1.7, the span inside my anchor tag overflows, despite having a relative position, static width/height, and hidden overflow. While it appears fine in other br ...

Creating a personalized and versatile table component with unique functionality: where to begin?

Looking to create a versatile table component that can adapt for both desktop and mobile versions. If the screen width is below 720px, it should display a table using div, ul, li elements with a "load more" button at the bottom. If the screen width i ...

Creating a PDF from dynamic HTML and transferring it to an AWS S3 bucket without the need to download the PDF

We have created a web application using React JS where we attempted to generate a PDF. Instead of downloading or opening the PDF in a new window, our goal is to directly upload it to an AWS S3 bucket. We have researched and tried various samples but have n ...

unleashing the magic of AJAX: a guide to extracting

In my Symfony project, I am attempting to retrieve the content of an AJAX request in order to check the data using dump(). The purpose is to process this data and perform a SQL query. However, when I use dump() in my controller, there doesn't appear t ...

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

The mp4 video on the website will only load if the Chrome developer tools are activated

Whenever I try to play the video set as the background of the div, it only starts playing if I refresh the page with Chrome dev tools open. HTML: <div id="videoDiv"> <div id="videoBlock"> <img src="" id="vidSub"> <video preload="prel ...

Jquery Plugin for Click Selection Activation

After receiving no response to my previous inquiry, I decided to proceed with this particular plugin setup. (function ( $ ) { $.fn.myPlugin = function (options) { options = $.extend( {}, $.fn.myPlugin.defaults, options ); return this.each(function (i ...

Using jQuery to adjust the input value up and down with buttons

var number = 1; $("#counter input").attr('value', number); $("#increase").click(function(){ $("#counter input").attr('value', number++); }); $("#decrease").click(function(){ $("#counter input").attr('value', number--); }); ...

JavaScript implementing failover logic in fetch()

I am trying to fetch data from an array of URLs using the fetch() request method: const urls = [ 'https://dewnuf111111.com/configuration', 'https://dewnuf222222.com/configuration', 'https://bcsmania.co.uk/test.json' ]; ...

Learn how to trigger the keydown function in VUE programming

I am trying to create a method that will be triggered whenever any key on the keyboard is pressed, regardless of where the focus is. I want to be able to determine which key was pressed in this method. Currently, I have set up an event listener for keydow ...

Creating a variable before defining a function

Is there a way to define 'sender_psid' globally instead of inside the 'app.post' function so that it can be accessed by the function calls at the bottom? Note: Declaring it outside the function won't work due to 'webhook.even ...

AngularJS v 1.3.17: ng-click not triggering within modal dialog

It seems like I may have overlooked something here. Here is the code snippet for a module: (function (app) { 'use strict'; app.controller('modalCtrl', modalCtrl); modalCtrl.$inject = ['$scope', '$modalI ...