Html Question posted in
Some basic documentation can be found here.

How do you make an HTML element transition seamlessly across pages like Stack Overflow's top bar?

When you move from one page to another on a website, some of the content disappears briefly before being replaced by the contents of the new page. But other elements seem not to be affected at all. For example when navigating this website (Stack Overflow), across pages, the top bar div doesn’t flinch.

How can this effect be achieved? Preferably with vanilla HTML, CSS and JS. Can it be done without combining all the pages into one file?

How did Stack Overflow do it with their top bar?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    From what I've gathered so far:

    The top bar of Stack Overflow only seems unaffected without throttling.

    If you really want to, consider make your web app an SPA (Single Page Application). But this could be more effort than it's worth, just for the sake of aesthetic.


  2. 0

    A Single Page Application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page, rather than loading entire new pages from the server. SPAs use JavaScript to update the content of the page dynamically, providing a smoother and more responsive user experience.

    In a traditional multi-page application, when you navigate to a different page, the browser sends a request to the server, which responds by sending a completely new HTML page. In contrast, SPAs load the initial HTML, CSS, and JavaScript resources, and subsequent interactions with the application are handled by JavaScript, typically using AJAX (Asynchronous JavaScript and XML) or other techniques to fetch and update data without requiring a full page reload.

    Here’s a simple example of how you might create a basic SPA using vanilla JavaScript:

    1. HTML Structure:
      Create a basic HTML file with a container element where the content will be dynamically updated. For example:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My SPA</title>
</head>
<body>
    <header>
        <h1>My SPA</h1>
        <nav>
            <a href="#" onclick="loadPage('home')">Home</a>
            <a href="#" onclick="loadPage('about')">About</a>
            <a href="#" onclick="loadPage('contact')">Contact</a>
        </nav>
    </header>
    <main id="content">
        <!-- Content will be dynamically loaded here -->
    </main>
    <script src="app.js"></script>
</body>
</html>

    2. JavaScript (app.js):
      Write JavaScript code to handle the dynamic loading of content. For simplicity, you can create separate HTML files for different pages and load them dynamically. Here’s a basic example:

      function loadPage(page) {
    fetch(`${page}.html`)
        .then(response => response.text())
        .then(html => {
            document.getElementById('content').innerHTML = html;
        })
        .catch(error => console.error('Error loading page:', error));
}

// Initially load the home page
window.onload = function () {
    loadPage('home');
};

      In this example, when a navigation link is clicked, the loadPage function is called with the page name, and it fetches and injects the corresponding HTML content into the designated container.

    3. HTML Files for Each Page:
      Create separate HTML files for each page (e.g., home.html, about.html, contact.html), containing the specific content for that page.

      <!-- home.html -->
<h2>Welcome to the Home Page</h2>
<p>This is the home page content.</p>

      <!-- about.html -->
<h2>About Us</h2>
<p>Learn more about our company.</p>

      <!-- contact.html -->
<h2>Contact Us</h2>
<p>Get in touch with us.</p>

    This is a very basic example, and in a real-world scenario, you might want to consider using a front-end framework or library (such as React, Angular, or Vue.js) for more advanced SPAs with features like routing, state management, and component-based architecture.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search