Unconventional choice for website navigation bar

I'm encountering an issue with my navigation bar. I have implemented a script to fix its position at the top of the site, but the base position for the navigation bar is not at the top by default. To workaround this, I made it jump to the top when the user scrolls down the website. However, this abrupt jump to the top feels unnatural and I am seeking a smoother transition. I want the navigation bar to behave more fluidly.

Here are the scripts I'm currently using:

CSS:

#menu {
    text-align: center;
    height: 65px;
    width: 100%;
    z-index: 9999;
    position: fixed; // Initially set to "fixed", attempted changing to "relative" but script stopped working.
    background-color: #0F1113;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #63842d;
}

.f-nav { // Tried using position fixed or relative here after changing above CSS, still no luck.
    top:0;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}

Javascript:

$("document").ready(function($){
    var nav = $('#menu');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

The current setup works, but the initial jump when scrolling feels unnatural.

I tried another script that hides the navigation bar while scrolling down, but it caused issues with my header as it only displayed the navigation bar when scrolling up.

CSS:

body {
    margin: 0;
    padding: 0;
}
.fxdHdr {
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    transform: translateY(-60px);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
    height: 60px;
    background: #d3145a;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -ms-transition: -ms-transform 500ms ease;
    -o-transition: -o-transformtransform 500ms ease;
    transition: transform 500ms ease;
    text-align:center;
    line-height:60px;
}

Javascript:

var lastScroll = 0;
var scrollToStick = $("header").height();

$(window).on('scroll', function (evt) {
    var newScroll = $(window).scrollTop();
    $('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
    lastScroll = newScroll;
});

I'm looking for assistance in creating a more natural movement for my navigation bar, as the current jump from the base position to the top on first scroll is jarring.

Visit my website: here

Answer №1

There are a few adjustments that need to be implemented.

Important: The header height should be set to 160px, and you should apply the f-nav class after 125px to avoid any potential glitches. This will ensure a smooth transition effect.

if ($(this).scrollTop() > 160) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }

Changes in CSS:

#menu {
    text-align: center;
    height: 65px;
    width: 100%;
    z-index: 9999;
    position: relative; 
    background-color: #0F1113;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #63842d;
}

Update the positioning to relative and include the position property in the f-nav class.

.f-nav{
position: fixed !important; 
}

Answer №2

If you're looking to incorporate jQuery-UI into your project, one option could be to utilize the .switchClass() function:

JQuery

if ($(this).scrollTop() > 50) {
    nav.switchClass( "", "f-nav", 300);
} else {
    nav.switchClass( "f-nav", "", 200);
}

CSS

.f-nav { 
    top:0;
}

Check out the demo 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

jQuery's show/hide function exhibiting inconsistencies when checking or unchecking

I have implemented a feature on my webpage where there is a field for previous surgeries with certain elements. The goal is to display the previous surgery elements only if the "previous surgery" checkbox is checked. Below is a snippet of the code I'm ...

transmit data from Node.js Express to Angular application

I am making a request to an OTP API from my Node.js application. The goal is to pass the response from the OTP API to my Angular app. Here is how the API service looks on Angular: sendOtp(params): Observable<any> { return this.apiService.post(&q ...

Guide to incorporating crispy forms with Bootstrap 4 in Django

I'm struggling to integrate a bootstrap upload form with a Django form using crispy forms. Does anyone know how to incorporate crispy forms into a bootstrap form? This is an example of a Django crispy form: <form method="post" en ...

Properly managing the Ajax.BeginForm OnSuccess event

I am facing an issue with my code that calls the 'SaveNewSoftware' method. This method will return true if there is no existing software found, and false if software with the same name already exists. My problem is that even when the server call ...

Make sure that bootstrap is set to disregard the taller column heights

Is there a method to manipulate Bootstrap so that the first column of the second row is positioned just below the height of its corresponding column in the previous row? At present, each row adjusts its height based on the tallest column. <div class=&q ...

Having trouble with the npm Twitter API functionality?

I'm attempting to execute a simple stream using an example code snippet. Here is the code I am working with: var twit = require('twitter'); var twitter = new twit({ consumer_key: '[KEY]', consumer_secret: &ap ...

Once a WordPress user includes a php file

For the past three days, I've been grappling with this issue... calling on all experts for assistance! I manage four distinct Wordpress membership sites, each with its own branding. My goal is simple - to have a .wav file play the plan's name wh ...

Instructions on generating a fresh Ethereum or Solidity contract for every test using JavaScript and Truffle

overview After developing an Ethereum smart contract using the Solidity language, I utilized Ganache to deploy my contract for testing purposes. However, in order to conduct tests effectively, I need to create a new instance of my contract using JavaScrip ...

Double Tap Required to Update AngularJS Scope

Controller: // Modal Controller app.controller("ModalCtrl", ["$scope", "$filter", function($scope, $filter) { var date = new Date(); var currentDate = $filter('date')(new Date(), 'MM/dd/yyyy'); // Form Submit Actions $scope.s ...

Converting a Class Component to a Functional Component: Step-by-Step Guide

Recently, I have been transitioning from working on class components to function components in React. However, I am facing some issues with my functional component code after converting it from a class component. In my functional component code, there is ...

Separate string by using a regular expression pattern

Looking to parse a dynamic string with varying combinations of Code, Name, and EffectDate. It could be in the format below with all three properties or just pairs like Code-Name, Code-EffectDate, or Name-EffectDate. {"Code":{"value":"1"},"Name":{"value": ...

What is the most effective method for establishing a notification system?

My PHP-based CMS includes internal messaging functionality. While currently I can receive notifications for new messages upon page refresh, I am looking to implement real-time notifications similar to those on Facebook. What would be the most efficient ap ...

How can I ensure a function only runs after all imports have been successfully loaded in Vue 3?

Encountering an issue with importing a large quantitative variable in Vue 3. Upon running onMounted, it seems that the import process is not yet complete, resulting in an error indicating that the variable tesvar is "uninitialized". The code snippet prov ...

Easily fetching data with AJAX through jQuery

Completely new to using jQuery and AJAX, I attempted the code below for a simple http get request: <html> <head> </head> <body> <script src = "jquery-2.1.4.js"></script> <script src = "app.js"></script& ...

Exploring the ng-repeat directive with an array of objects

In the server response, I have an array of objects that I am trying to iterate over using ng-repeat in order to read each value. While trying to use array[0].value works fine, things are not going as expected when using ng-repeat. Despite all my efforts ...

Download our jQuery Fileupload control complete with a progress bar for free today!

Do you know of any free jQuery file uploader plugins with a progress bar? I need one for my classic-asp website. ...

Tips for resolving this JavaScript scope dilemma

I am attempting to retrieve the content of a file using jQuery's .get() method as shown below var news; $.get('news.txt', function (data) { news = data; if ($('#removeN').is(':checked')) { news = ""; } ...

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

A step-by-step guide on how to substitute document.write with document.getElementById('ElementID').innerHTML

As someone who is not a programmer, I often find myself attempting to grasp code and make adjustments through trial and error. Currently, I am faced with the challenge of modifying the document.write function in the function pausescroller within a Joomla m ...

Set the styling of a div element in the Angular template when the application is first initialized

I have a question about this specific div element: <div class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio"> <img fill priority [ngSrc]="media.value.src || ftaLogo" ...