Persistent top menu with unique elements

I am looking to create a header that changes based on the scroll event, similar to how it works on this website. When the cursor is at the top of the page, the header will have one appearance, and as you scroll down, the header content will change and become fixed.

While I have come across examples that shrink and fix headers, none of them address the issue of changing header content like I desire.

Note: Ideally, I would prefer a solution that does not involve third-party packages, as they tend to slow down page loading with multiple JavaScript files.

Thank you

  1. Sticky header on scroll with jQuery and CSS
  2. Persistent Headers

FOR EXAMPLE:

window.onscroll=function ()
{
   //Based on given offset, such as 100px maximum
   if (scroll == down)
   {
     //Display header_2 as fixed header
   }
   else
   {
     //Display header_1 as fixed header
   }

}

<div class="container">
   <div id="header_1">BIG HEADER with no menu</header>
   <div id="header_2">SMALL HEADER with menu only</header>
</div>
jqueryhtmlcss

Answer №1

To implement this trick, you need to monitor the current scroll position. By using the following code snippet, you can display either content A or B in the header depending on whether the scroll position is below 200px.

$(document).ready(function(){
    $(window).bind("scroll",function(e){
        if($(document).scrollTop() > 200) //
        { 
           //Set content B to header
        } else {
           //Set content A to header
        }
    });
});

Please note that I have not tested this code for bugs, so there may be errors. The intention here is to provide some guidance. Additionally, before making any changes to the content, it's essential to verify if it has already been updated.

I hope this explanation is useful!

Answer №2

Here is an example of how you can achieve this effect:

$(document).ready(function(){
    $(window).scroll(function(){
        var distanceFromTop = $(window).scrollTop();

        if(distanceFromTop > 200){
            $("#header").css('position','fixed');
            $("#menu1").css('display', 'none');
            $("#menu2").css('display', 'block');

        } else {
            $("#menu2").css('display', 'none');
            $("#menu1").css('display', 'block');

        }
    });
});

Answer №3

It seems like you're asking about creating a fixed menu that sticks when scrolling down on the page.

var menu = $('#menu');
var menuOffset = menu.position().top; //get original position of the menu

$(window).scroll(function() {
 if ($(window).scrollTop() > menuOffset + 40) {
    menu.addClass("menu-fixed");
    menu.css({position: 'fixed', top: 0});
 } else {
    menu.removeClass("menu-fixed");
    menu.css({position: 'static', top: menuOffset});
 }
});

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 JQuery AJAX to fetch an Array of Objects

My current challenge involves using json_encode in order to allow my jquery ajax function to fetch data from a php script. However, the array I am attempting to encode and retrieve consists of objects $la_uselessinfo = array(); $lv_cnt = 0; $uselessinfo ...

javascriptphpjqueryarraysajax

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

htmlcssfaviconfont-awesomeglyphicons

Using AdBlock Plus will conceal elements on a webpage that have ids or classes containing the term "ad"

In my website, there are two divs: one with the ID of ad_holder and the other with the ID ad_buttons. While testing the site on Mozilla with Adblock Plus installed, I observed that both divs were hidden. Upon further investigation, I discovered that Adblo ...

htmlcssadblock

When using a C# Web Service, it may encounter difficulty in producing JSON as an output format,

I'm currently working on implementing jQuery and JSON with a C# Web Service that I created. Despite my best efforts, the code below consistently results in XML output. Webservice Code [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] ...

c#jqueryweb-servicesjson

Using JQuery to loop through JSON data and display it dynamically on a webpage

I am working with a JSON list that contains an array of "OrderLines" along with other data like part numbers and prices. My goal is to display each "OrderLine" and its corresponding data in HTML elements or tags. I want the HTML elements for each order li ...

javascriptjqueryarraysjsonloops

The placement of Bootstrap Datepicker is experiencing issues

I have integrated the Bootstrap Datepicker from Eternicode into my ASP.Net MVC website. While the functionality is working well, I am facing difficulty in positioning the datepicker modal using the orientation option mentioned in the documentation and code ...

javascriptjquerytwitter-bootstrapdatepicker

What could be causing this code to malfunction in Internet Explorer 7?

Code: Demo: In the majority of modern browsers such as Safari, Chrome, Firefox, and IE8/9, the code works perfectly fine. However, there seems to be an issue with IE7, causing it not to work. Any idea why this might be happening? My goal is for the conte ...

htmlcssinternet-explorer-7

Access HTML content including styles using Angular

I have created an Angular application and I am looking to extract the html of a template from a large component, including the styles applied to the classes used. Can anyone advise on how to achieve this in Angular? Currently, I am attempting to use the fo ...

javascripthtmlcssangular

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

htmlcss

Changing the background color on Firefox for blueimp jQuery file upload

While using Firefox (even on the online demo), I noticed that when selecting a file for upload, the background of the table row behaves strangely: some parts appear light gray and others are white. Resizing the window or rearranging elements seems to trigg ...

jqueryjquery-file-uploadblueimp

Tips on getting Qtip2 Growl to start at the bottom position

After utilizing Qtip2 in two of my previous projects, I am eager to try out a new feature called Growl. You can find more information about Growl here. My goal is to have the growl start from the bottom instead of above. I have attempted to reverse the c ...

jqueryqtip2

Issue with Attaching Click Event to Dynamic Div Elements

I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...

javascriptjqueryhtml

The proper method for incorporating a hover effect using CSS

Currently, I am facing an issue with integrating a hover effect to an image using CSS. The problem arises when the hover area is not aligned properly and the effect triggers even when the mouse is not directly over the image. <body> <div id=&apos ...

htmlcsshover

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

An effective way to iterate through a JSON GET response

As a Laravel developer with no jQuery experience, I am seeking help to display editable images on Dropbox file uploader dynamically. Thank you in advance. JQuery Scripts <script> $(document).ready(function(){ var data = @json($roomdetails); ...

jquerylaravel-8

The 'length' cannot be searched using the 'in' operator

I am experiencing an issue that I can't quite solve. I have come across solutions for this problem, but they all involve methods that don't use AJAX to retrieve data. If anyone can assist me with this, I would greatly appreciate it. Here is the J ...

javascriptjqueryajax

Switching between menu options and buttons

My game has a menu for selecting the class. Each class has its own button - Knight, Mage, Archer. I want to use jquery so that when any of these buttons are clicked, a new set of buttons appears to choose the race. I tried using .replaceWith() but it does ...

javascriptjqueryhtml

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img. My goal is to have the thumbnails scroll along with the main pictures as the user ...

javascriptjqueryhtmlcss

Adjusting the Size and Spacing of Vuetify's Buttons

Why are buttons extending beyond the card width? https://i.stack.imgur.com/wVRoQ.png I'm facing difficulties customizing the buttons within the cards. I want to eliminate all padding so that the black border perfectly encloses the icon without any un ...

cssvuejs2vuetify.js