Header bar/navigation bar that is constantly changing

Hi there, I'm in the process of creating a dynamic header/navigation bar similar to the one on this website:

Here's what I have so far:

Jquery:

$(document).ready(function() {
var lock = $('#header').position().top;
$(window).scroll(function() {
    if(lock >= $(window).scrollTop()) {
        if($('#header').hasClass('fixed')) {
            $('#header').removeClass('fixed');
        }
    } else { 
        if(!$('#header').hasClass('fixed')) {
            $('#header').addClass('fixed');
        }
    }
}); 
});

Html:

<div id="header" class=""></div>

Css:

#header {
width: 100%;
height: 80px;
background-color: #000;
left:0;
right: 0;
margin-top: 340px;
position: absolute;}

body {
height: 7000px;
width: 100%;
float: right;}
.fixed {
position: fixed;}

I would greatly appreciate any assistance. Thank you.

jqueryhtmlcss

Answer №1

Are you looking to create a sticky menu with an anchor that moves on scroll?

Check out the script below:

$(function() {
    var move = function() {
       var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
       if(st > ot) {
            s.css({
                position: "fixed",

            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",

                });
            }
        }
    };
    $(window).scroll(move);
    move();
});

Don't forget to add this to your HTML code:

<div id="scroller-anchor></div>
   <div id="scroller">
     YOUR MENU HTML HERE
   </div>

UPDATE

For a live demo, check out this jsFiddle link.

PS: If you want to customize the background color, simply replace "background-color": "red" with your preferred color.

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

Avoid opening the page when attempting to log in with jquery, ajax, and php

I am facing an issue with my code. I have a file named "index.html" which contains a login form. Another file called "dash.js" retrieves the username and password from the login form and redirects to "connectdb.php" to check the login credentials with the ...

javascriptphpjqueryhtmlajax

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

Is there a way to delete content in HTML after a particular text using Python and BeautifulSoup4?

I am currently in the process of scraping information from Wikipedia. My goal is to extract only the necessary data and filter out any irrelevant content such as See also, References, etc. <h2> <span class="mw-headline" id="See ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

When utilizing jQuery in HTML, the Marquee will bounce back upon reaching the end

My issue is that when I use a regular marquee, the text simply goes to the end and does not bounce back to the start as soon as it reaches the end of the div. Instead of using a normal marquee, I am looking to achieve this desired effect by utilizing jQue ...

javascriptphpjqueryhtmlajax

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

javascriptjqueryhtmllocationgoogle-places-api

HTML Scripts: Enhancing Web Functionality

I have another question regarding executing a script (docs()) upon clicking on text. I attempted to use the following code: <p><span class="skill">Documentation can be found here.<script>docs()</script></span></p> Unfo ...

javascripthtml

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

javascripthtmlcssreactjsweb-frontend

In Internet Explorer, the toggle div expands to fill the available space, but this behavior is not consistent in

Utilizing the toggle function in jQuery, I created a mechanism to switch between 4 different blocks of content. You can view a demonstration of how the functionality operates correctly in Google Chrome here: If you encounter any issues with the functiona ...

jqueryhtmlcss

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

cssangulartypescript

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

Sending JSON array from PHP to jQuery AJAX

Currently, I am working on an experimental project where I need to search for a product in a MySQL database using the product name and retrieve the price in the 'price input' field and sell price in the 'sellprice input' field. You can ...

javascriptphpjquerymysqlajax

Boostrap - reveal.bs.modal - Obtain the value of "href"

I have a requirement to dynamically load a PDF URL into the <object data=""> attribute when a Bootstrap modal link is clicked. The PDF URL should be extracted from the href attribute of the modal link. Here is the code snippet that I have ...

jquery

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

javascripthtmlcss

Encountering difficulties when trying to set up popovers in Bootstrap

I'm currently working on enhancing an Angular application developed by someone else. My task involves adding a popover feature. The HTML code is located within an ng-include template and includes the following tag: <p class="filetracker-label" dat ...

jqueryangularjstwitter-bootstrap

Ways to eliminate the up and down arrow in the MUI number field

How can I remove the up and down arrow from the MUI number field? My current version is 5.3.0. Is it possible to achieve this using the sx prop? https://i.sstatic.net/fABz9.png Learn more about the sx prop here <TextField sx={{...}} id="outli ...

cssmaterial-ui

Guide to creating an autocomplete search bar in CodeIgniter

I've been working on creating an autocomplete search field in CodeIgniter, but I'm encountering some issues. Despite setting a limit of 10 results, every time I input a character, the list keeps expanding endlessly as shown in the screenshots bel ...

javascriptphpjqueryajaxcodeigniter

ng-model to interact with dynamically loaded elements

My dynamic list contains various items, such as cars, and is not of fixed length. Upon loading, the list appears as follows: itemList = [ { id: 0, name: 'bmw' }, { id: 1, name: 'audi' }, { id: 3, name: 'vw' }, ...

javascripthtmlangularjsarrayscheckbox

The JQuery function will only execute after the alert within the success function has been triggered

After adding an alert following $('#add_new').trigger('click');, the statements below it work as expected. However, without the alert, the following statements do not seem to work. It appears that the trigger event may not have complete ...

javascriptjquery

What is the process for including a JavaScript file in an HTML document?

Greetings to all and thank you for taking the time! I have a straightforward query for you.. I have designed an html page featuring only a basemap (open street map). Moreover, I possess a javascript file which utilizes your coordinates to calculate a perce ...

javascripthtmlfunctionpopupjsfiddle

What's the best way to determine the background image on this website? I'm in the process of replicating a site on

I have been asked to clone the website in order to create a Wordpress site. The original site is currently on Kajabi platform. I managed to download all images from the Kajabi site by right-clicking and selecting download. However, there are certain image ...

htmlcsswordpresscloning