Menu
When I use a fixed header, it's shaking when adding my is-sticky
CSS class. It's starting with top:0; for it's animation when scrolling down. I want it to stay fixed smoothly on top in a way that will not cause noticeable jitter. For Example: http://www.lazada.com.my/
Here is my demo.
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
if( ! ($('#scroller').hasClass('is-sticky'))) {
$('#scroller')
.addClass('is-sticky')
.css('top',9)
.animate({
'top': 84
},'1000');
}
} else {
if($('#scroller').hasClass('is-sticky')) {
$('#scroller')
.removeClass('is-sticky')
.css('top',9)
.animate({
'top':84
},1000);
}
}
});
});body{
height:1000px;
margin:0;
padding:0;
position:relative;
}
#scroller {
position: absolute;
left: 0;
top: 84px;
width: 100%;
z-index: 30;
background:#CCC;
height:20px;
}
#scroller.is-sticky {
position: fixed;
width: 100%;
left: 0;
top: 9px;
margin-top: -31px;
height: 53px;
z-index: 701;
background: #CCC;
opacity: .97;
filter: alpha(opacity = 97);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<body>
<div id="scroller">Some controls</div>
</body>
224
The effect, from the website you linked, is actually quite easy to do.
Firstly, you want your header element to have position: fixed; there is no need to add this dynamically via javascript. It should have this property by default (as it shows in the website you linked).
What they are doing is hiding the top navigation which is within the header at a certain scroll point.
You can use jquery to do this very simply.
DEMO
var $el = $('header .two');
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$el.addClass('hide');
} else {
$el.removeClass('hide');
}
});* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
header .one {
height: 20px;
width: 100%;
background: lime;
position: relative;
z-index: 10;
}
header .one.hide {
height: 0;
}
header .two {
background: red;
height: 40px;
position: relative;
z-index: 20;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
}
header .two.hide {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
main {
background: lightblue;
height: 1200px;
width: 100%;
padding-top: 60px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div class="one">div</div>
<div class="two">fixed</div>
</header>
<main>
content
</main>
<footer>footer</footer>You have to check .scrollTop when is reached to 84. In addition, you don't need to use jquery .animate function, you can achieve that effect by css transition.
Jsfiddle
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
