score:1
Accepted answer
May be this what you need? Let me know if you need something else. I have modified script to remove that jump you are telling. I have removed the classes when you reach header scrolling up all the way.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
var offset = $('header').offset();
$(window).bind('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else if(scrollTop == offset.top) {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
body{
margin: 0;
}
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
</body>
</html>
Related Query
- How to fix jQuery Mobile's fixed footer?
- JQuery JCrop - How to set a fixed size selection area?
- How do I get a fixed position div to scroll horizontally with the content? Using jQuery
- How to clear or change the navigation history of Jquery Mobile?
- .is(":hover") is broken as of jQuery 1.9 How to fix
- jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?
- How to fix the iOS 11 input element in fixed modals bug
- How to fix "$ is not defined" error when unit testing Jquery with Typescript using Mocha?
- how to fix 'jQuery is not defined' error in jquery library?
- How to achieve fixed position background scroll/reveal effect? jQuery plugin available?
- How to make jQuery draggable with fixed X and Y axis?
- How to fix positioning error with jQuery Validation Engine and Twitter Bootstrap modals
- How to use jQuery draggable with fixed position?
- How to prevent (bootstrap) fixed top navigation from zooming on mobile
- jQuery - how to make a fixed div scroll horizontally after scrolling vertically
- How to fix the jquery url.indexOf function not defined at jQuery.fn.init.jQuery?
- How do I hide the next/today/previous navigation in jQuery DatePicker and turn off animations?
- How to keep panel height fixed with scroll if content overflow for JQuery Mobile
- How can I alter the FixedTableHeader jQuery plugin to have a fixed first column as well?
- How to fix Jquery UI slider, Showing Negative value
- jQuery + IE8 = Object doesn't support this property or method. How to fix this?
- How to set a fixed width on buttons within a jQuery buttonset?
- How can I fix this script with jQuery toggle?
- How to fix radio button validation in jQuery plugin?
- How to smooth scrolling using jquery
- How can I fix indentation in Vim for Jquery scripts?
- How to fix the jquery version compatibility issue?
- jQuery + Bootstrap Navigation Bar - How to highlight the link when visited
- How to implement jQuery Mobile Animated Ajax page navigation (transitions) in plain javascript
- Anyone know of a jQuery fisheye/dock navigation plugin that is able to have a fixed position?
- In jQuery Datatables, how we define fixed value columns?
- How to fix horizontal scrollbar caused by jQuery FlexSlider?
- How to fix the width and height of jquery lightbox?
- jQuery smooth scrolling anchor navigation
- how to smooth jquery animations
- How can I fix this undefined index error? Jquery Ajax to PHP
- asp.net form controls are unreadable when in a jQuery dialog, how do you fix it?
- How to position CSS fixed JQuery dropdown bar
- JQuery Smooth Scroll to Anchor with Sticky Navigation Bar
- How to fix this JQuery dropdown menu?
- How to fix this JQuery intellisense in Visual Studio 2008 problem?
- jQuery replaceWith fills in raw HTML instead of replacing with new tag: How do I fix this?
- How to fix the jQuery 1.8 “unsupported pseudo” error?
- jquery smooth site navigation between divs
- how to achive smooth page navigation in silverlight window phone sdk. as shown in picture below
- How to detect a mobile device using jQuery
- How to manage a redirect request after a jQuery Ajax call
- How to change the href attribute for a hyperlink using jQuery
- How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
- jQuery how to find an element based on a data-attribute value?
More Query from same tag
- Is there a way to prevent all actions while css transition takes place?
- Looping Through Multiple JSON Requests (YouTube Data API)
- jquery "animate" variable value
- JSON - searching through keys with variable names (unknown)
- jQuery fade to new image
- Move class name from child to parent
- Is it possible to retrieve data from SQL Server using jQuery?
- How to crop a string which is exceeding the element length?
- How to change the cell color of a jquery datepicker
- Parse 'Date & Time' string in Javascript which are of custom format
- Problems using $.getJSON
- Toggle <span> text which contains inner HTML element
- Validate 1 field (unobtrusive) when other field changes, and check only 1 rule
- How to change div color when gradient is scrolled?
- How to drag and drop multiple elements between different tabs
- How can you most easily pass URL arguments/data between JQuery Mobile (JQM) embedded/internal pages?
- Properly displaying ajax error.responseText
- JQuery: Create new element with data attribute
- jQuery - change text on button hover
- How to Scroll Down - JQuery
- Focus next input once reaching maxlength value
- Background text in textbox
- File uploading in parallel chunks using jquery file upload plugin
- What is the Javascript event that triggers when you drag a file from your desktop to your browser
- Extract multiple data from DOM in jQuery?
- Website doesn't recognize GET even though manual URL works
- jQuery - drag and drop between divs while being able to resize item
- How to get the fileName in javascript from input file tag in IE browser
- "$(...)[0].append is not a function" with jQuery
- Regular expression [Any number]