Tips for halting the navigation bar when scrolling

Creating a Navigation Bar:

<div class="navigation-bar">
    <div class="item">Home</div>
    <div class="item">About us</div>
    <div class="item">Our Services</div>
    <div class="item">Contact us</div>
</div>

Styling with CSS:

.navigation-bar {
    background: black;
    width: 100%;
    margin: 0px;
    height: 70px;
    position: sticky;
}
.f-nav{  /* Fixing the main menu container */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
.item {
    float: left;
    width: 20%;
    height: 100%;
    color: white;
    text-align: center;
    font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    font-size: 26px;
    font-weight: 100;
    padding-top: 20px;
}

Adding JavaScript functionality:

$("document").ready(function ($) {
    var nav = $('.navigation-bar');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

I've implemented this code for a navigation bar, but it's not working as expected. I'm having trouble stopping the navigation bar when it reaches the top of the page. The code seems correct to me, so I'm unsure why it's not functioning properly.

javascripthtmlcss

Answer №1

    <script>
       $(document).ready(function(){
           $(window).bind('scroll', function() {
           var navHeight = $( window ).height() - 70;
                 if ($(window).scrollTop() > navHeight) {
                     $('nav').addClass('fixed');
                 }
                 else {
                     $('nav').removeClass('fixed');
                 }
            });
        });
    </script>
.fixed {
    position: fixed; 
    top: 0; 
    height: 70px; 
    z-index: 1;
}


<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Unique content goes here

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

Can you explain the compatibility between comet and PHP?

As I utilize Comet iframe, I simply send script tags from the backend PHP file to the frontend where JavaScript displays them. I would appreciate it if someone could provide a concise explanation of how the comet server fits into the equation and how comm ...

javascriptjqueryajaxcomet

Display an HTML code snippet on the webpage

I'm facing a situation that has been discussed before on this platform. However, I want to present my problem in a different light. I am working with PHP and need to display an HTML string from the database on my webpage. The issue is that the CSS app ...

htmlcss

What is the term used for the objects that res.render passes?

I constantly find myself struggling with defining objects inside res.render. Is there a way to define them globally or outside of res.render? I hope someone can offer some guidance.. here is a sample code snippet: router.get("/home/blog", function(req,r ...

javascriptnode.jsexpressbody-parser

Unable to modify the appearance of text on the canvas

Trying to customize the font style of canvas text with Press Start 2P The URL has been imported into a CSS file as follows: @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); .canvasClass{ font-family: ...

javascripthtmlcsscanvashtml5-canvas

Input ENTER triggered JSON path loading

Upon clicking "enter", I am looking to display the description corresponding to the title. To achieve this, I have defined a variable to store the path of the description: var descri = json.query.results.channel.item.map(function (item) { return item. ...

javascriptjqueryajaxjson

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

javascriptarraysexpressobject

Adjusting the dimensions of the image carousel

Here is my code for an Image carousel: <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div id="imageCarousel" class="carousel slide" data-interval="4000" data ...

jquerycssrazorbootstrap-4

Using the spread operator in combination with the reduce function in JavaScript

I am attempting to generate all possible paths of the provided JSON object. I have managed to generate the paths, but I would like the final array to be flattened without any nested arrays inside it. I tried spreading the array, but there are still some ne ...

javascriptjsonspread

Issues arise with the escape key functionality when attempting to close an Angular modal

I have a component called Escrituracao that handles a client's billing information. It utilizes a mat-table to display all the necessary data. When creating a new bill, a modal window, known as CadastrarLancamentoComponent, is opened: openModalLancame ...

javascriptangulartypescriptbootstrap-modal

Sibling selector beside not functional

Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected. Here is the code snippet causing the issue: .sidebar { position: fixed; ...

htmlcss

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp

Passing an unpredictable amount of parameters to react router in a dynamic way

Within my React application, users have the ability to create both folders and files. A folder can contain an indefinite number of subfolders within it. Here is an example structure: Folder-1 |_Folder-1-1 |_Folder-1-2 |_Folder-1-2-1 |_Folder- ...

javascriptreactjsreact-router

JQuery plugin for creating interactive date selection forms

Having some trouble creating a dynamic form. The datepicker seems to only work on the first row and I can't click it. Tried a few different codes but no luck so far. Below is the code excluding the PHP part, which is just for inserting into a database ...

javascriptphpjqueryjquery-ui-datepicker

Is it possible to represent a recursive variable using CSS?

When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...

htmlcsscss-variables

Require assistance in generating three replicas of an object rather than references as it currently operates

I am encountering an issue with my code where I seem to be creating 4 references to the same object instead of 4 unique objects. When I modify a value in groupDataArrays, the same value gets updated in groupDataArraysOfficial, groupDataArraysValid, and gro ...

javascriptjquery

Error message "Undefined error encountered when attempting to display an array of objects using jQuery and PHP through AJAX on the console"

While trying to parse a JSON using jQuery and AJAX, I encountered an issue where some objects in the Array, like the SUM(amountbet) object, are showing up as "undefined" in the console. https://i.sstatic.net/pMUqc.png The image above depicts th ...

javascriptphpjqueryajax

Using Discord.js to retrieve identical lines from a text file in a database

I've been working on a discord bot that is supposed to send a line from a .txt file to the message author via DM, then delete that specific line from the file. However, it seems to be sending the same line repeatedly. Any suggestions on how to resolve ...

javascriptnode.jsdiscorddiscord.js

A hobby project involving the creation of a webmail app using a combination of PHP

As a beginner in web development, I am eager to tackle a hobby project that will help me learn more about PHP and other web-related technologies. I have been considering creating a simple webmail client, but I'm not sure where to begin. I anticipate ...

phphtmlimap

Prevent fluctuations in container height + tips for aligning a list item at the bottom

In my jsFiddle demo here, I have implemented a vertical menu. Upon hovering on the icon, I would like the description of that menu to appear with a fade effect. Q1: However, during the fading transition, the text in the description wraps into a new line, ...

css

The Recharts Line chart fails to display newly added data points when data is updated

My app features a straightforward tool that enables users to monitor their weight changes over time. Despite successfully receiving new data in the props, the chart does not update and display the new point. Recharts Component: import React from 'rea ...

javascriptreactjsrecharts