my fiddle

by Xenel

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="global-padding navbar clearfix">
        <a href="#" class="navbar__logo"><img src="{% static "img/logo.svg" %}" alt="Interior Logo"></a>
        <ul class="clearfix navbar__menu">
            <li class="navbar__link-item"><a href="#" class="navbar__link navbar__link_active">HOME</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">PRODUCTS</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">HISTORY</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">SHOWROOM</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">CONTACT</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__search"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></a></li>
        </ul>
    </nav>
    <div class="container">
        <p class="global-padding" style="margin-top: 20px;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ad tempore eaque autem at veritatis, modi a tenetur eius rem fugiat sunt esse! Placeat tempore quae quia eius alias! Ea officia modi cum sint pariatur architecto vero corrupti autem ex ratione asperiores commodi dolore fugiat, enim blanditiis quas accusamus sunt aperiam praesentium, accusantium excepturi? Ea, labore? Explicabo neque atque eveniet totam aperiam repellendus minima quia amet exercitationem laborum, quo tempore facilis dolores magni tenetur. Fuga nobis sit neque alias eos minima. Maiores quisquam soluta iure corrupti minima, ut enim error, ab nihil consectetur cupiditate, quod magni consequatur adipisci repudiandae architecto culpa suscipit! A minus omnis molestiae aut. Nam fugiat at, est voluptatem minus...

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Montserrat', sans-serif;
}

.global-padding {
	padding-right: 98px;
	padding-left: 98px;
}

.clearfix:after {
	display: table;
	clear: both;

	content: '';
}

.container {
	width: 100%;
	max-width: 1366px;
}

.navbar {
	padding-top: 63px;
	padding-right: 98px;
	padding-left: 98px;
}

.navbar_fixed {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;

	width: 100%;
	height: 32px;
	padding-top: 23px;
	padding-left: 98px;
	padding-right: 98px;

	background-color: #ffffff;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}

.navbar__menu {
	float: right;

	list-style: none;
}

.navbar__menu_fixed {
	float: right;

	padding-right: 196px;

	list-style: none;
}

.navbar__link-item {
	float: left;
}

.navbar__link {
	font-size: 14px;
	font-weight: 300;

	padding: 10px 13px;

	text-decoration: none;
	text-transform: uppercase;

	color: #8c8c8c;
}

.navbar__link:hover {
	color: #212121;
}

.navbar__link_active {
	font-weight: 700;

	letter-spacing: 1.4px;

	color: #212121;
	border-bottom: 3px solid #212121;
}

JavaScript

$(document).ready(function() {
  
    $(window).scroll(function () {
        console.log($(window).scrollTop())

        if ($(window).scrollTop() > 280) {
            $('.navbar').addClass('navbar_fixed');
            $('.navbar_fixed').removeClass('navbar');
            $('.navbar__menu').addClass('navbar__menu_fixed');
            $('.navbar__menu_fixed').removeClass('navbar__menu');
        }

        if ($(window).scrollTop() < 281) {
            $('.navbar_fixed').addClass('navbar');
            $('.navbar').removeClass('navbar_fixed');
            $('.navbar__menu_fixed').addClass('navbar__menu');
            $('.navbar__menu').removeClass('navbar__menu_fixed');
        }
    });
});