I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if <300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this Some site, scroll down and you'll see what I want.
My html like that
<div class="heading-wrapper">
1
2
3
4
5
</div>
Css
.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}
.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}
and jQuery
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
}
else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
$('.heading-wrapper').removeClass("fixed");
},800);
}
});
It dont work like what I want.
If scrolling by pressing down mouse whell - it dont animate..
Animation appears at once only..
Slide up animation never appears..
If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))
Please, help me to fix this, and remember, do not judge strictly! :)
JsFiddle link
Demo
js
$(document).ready(function () {
$("header").before($("header").clone().addClass("animateIt"));
$(window).on("scroll", function () {
$("body").toggleClass("down", ($(window).scrollTop() > 100));
});
});
css
body, html {
margin:0;
padding:0;
}
header {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: #000;
color: #fff;
}
header.animateIt {
position:fixed;
top:-60px;
left: 0;
right: 0;
z-index:999;
transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
top:0;
}
.content {
padding: 0 20px 20px;
background: #fff;
line-height: 1.5;
color: #333;
}
html
<header>
1
2
3
4
5
</header>
Here's how I would do it.
First, depending on the browsers you're supporting, you could add this CSS :
.heading-wrapper {
position: fixed;
top: -80px;
transition: top 1s linear; /*as you wish*/
[...]
}
.heading-wrapper.relative {
position: absolute;
top: 0px;
}
.heading-wrapper:not(.relative).fixed {
top: 0px;
}
Then in Javascript :
var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;
$wrapper.clone().appendTo("body").addClass("relative");
$win.scroll(function () {
top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if( top > 300)
setTimeout(function(){$wrapper.addClass("fixed");},0);
else if( $wrapper.hasClass("fixed") )
setTimeout(function(){$wrapper.removeClass("fixed");},0);
});
I updated your JSFiddle.
EDIT : Added a cloned menu, absolute.
Related
This is my the link of website http://www.expresskerala.com. In this website i need to make header sticky. Is there any way to make that sticky.I had tried this code.
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
z-index: 99 !important;
}
But when i use this code, the other content will go down. Is there any solution for this. This should be also responsive.
Since a position:fixed element is taken out of the document flow, you need to add a top margin equal to the height of the .site-header to the next element. You also need to add top:0 to fix the .site-header to the top of the document.
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
z-index: 99 !important;
top: 0;
}
.site-header + * {
margin-top: 240px;
// you should change this using media queries if the site-header height changes
}
Something like this:
#media only screen and (min-width: 1024px) {
.site-header {
position: fixed;
z-index: 1;
}
#main > .container {
padding-top: 250px;
}
}
you can add these css to get better result
body {
padding-top: 240px;
}
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
add this additional css in your file
.fixed-header {
position: fixed;
top:0;
}
than use also this script:
$(window).scroll(function(){
if ($(window).scrollTop() >= 140) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
});
/* scrollTop() >= 140
Should be equal the height of the header
*/
Try this one:
JS
$(window).scroll(function(){
if ($(window).scrollTop() >= 240) {
$('body').addClass('sticky-header');
}
else {
$('body').removeClass('sticky-header');
}
});
CSS
body.sticky-header {
padding-top: 239px;
}
body.sticky-header header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999
}
header {
transition:all ease .3s
}
Hope this may help you.
Use sticky position W3schoolor use jquery with fixed
So I'm trying to get a div to fade in when a scroll threshold has been reached. It starts off with display: none; in the css for its div id. When the threshold is hit, fadein does not remove display:none; from the css as I've read it should.
CSS:
#SideBanner01{
display: none;
right: 0;
margin-left: 60.4%;
margin-right: 3%;
margin-top: .25%;
overflow: hidden;
}
#SideBanner01 img{
width: 206.25%;
margin: -30% -15% -8% -140%;
}
Javascript:
$(window).scroll(function () {
var delay = 500;
var scrollTop = $(window).scrollTop();
if (scrollTop > 20) {
$('#SideBanner01').fadeIn(delay);
}
else{
$('#SideBanner01').hide();
}
});
Inspector after fadein runs:
element {
position: fixed;
}
#SideBanner01 {
display: none;
right: 0;
margin-left: 60.4%;
margin-right: 3%;
margin-top: .25%;
overflow: hidden;
}
body {
color: #000000;
text-align: left;
}
Html:
<div style="position: fixed;" id="SideBanner01"><img src="http://survey.unifocus.com/ClientFiles/19500/Bardessono-stone-wheels.jpg"></div>
I'm using jquery 1.6 so I believe fadein should work as I'm trying it. Any idea on what is going on? I've been able to get "$('#SideBanner01').show(delay);" to work but it flies in from the side but it looks pretty tacky. Thanks in advance.
Don't you mean to do:
$(window).scroll(function () {
var delay = 500;
if ($(this).scrollTop() > 20) {
$('#SideBanner01').fadeIn(delay);
}
else{
$('#SideBanner01').hide();
}
});
In your code snippet, scrollTop is used as a regular variable (not defined).
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>
<style>
body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky { background-color: #546bcb; height: 70px; }
#section { height: 1500px; }
#footer { background-color: #cb5454; height: 140px; }
</style>
Here is my code: http://jsfiddle.net/uaqh018d/
I want #sticky to stick to the top of the page after scrolling past #header. I also want it hidden until stuck. And then of course have it unstick+hide again after scrolling back up to #header.
How can I achieve this?
I would recommend adding a class to #sticky when it's ready to be fixed to the top of the screen, and then removing that class when you want to 'unstick' it. Then you can manipulate that class in CSS.
e.g. for a class fixed you'd put the following in your CSS:
#sticky {
display: none;
background-color: #546bcb;
height: 70px;
}
#sticky.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
And then your jQuery would look like this:
$(window).scroll(function() {
var distanceFromTop = $(this).scrollTop();
if (distanceFromTop >= $('#header').height()) {
$('#sticky').addClass('fixed');
} else {
$('#sticky').removeClass('fixed');
}
});
Here's an updated FIDDLE
I might also recommend some jQuery fade or slide effects (see the fiddle).
You can use position: fixed and in js detect when user scroll like this:
$(document).scroll(function() {
//detect when user scroll to top and set position to relative else sets position to fixed
$("#sticky").css({
"top": "0",
"position": $(this).scrollTop() > 140 ? "fixed" : "relative"
});
});
body {
margin: 0px;
background-color: #e3e3e3;
}
#header {
background-color: #cb5454;
height: 140px;
}
#sticky {
background-color: #546bcb;
height: 70px;
width: 100%;
position: fixed;
}
#section {
height: 1500px;
}
#footer {
background-color: #cb5454;
height: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>
References
.scroll()
In my case, the div I wanted to be sticky was inside of another div (ie. not stuck to the page, but in another fixed div on the side of the page). Here's my adaptation of #bowhart's answer to solving this problem given a React component (sticky_adapter.js):
module.exports.makeItSticky = function(thisReactComponent, parentScrollNode = window) {
const thisNode = $(ReactDOM.findDOMNode(thisReactComponent));
const position = thisNode.position();
// Uncomment for verbose logging
//console.log("Initial position: " + UIUtils.stringify(position));
const scrollContainer = $(parentScrollNode);
scrollContainer.scroll(() => {
const distanceFromTop = scrollContainer.scrollTop();
// Uncomment for verbose logging
//console.log("ScrollTop: " + distanceFromTop);
if (distanceFromTop > position.top) {
thisNode.addClass("stick-to-top");
} else {
thisNode.removeClass("stick-to-top");
}
});
};
Now, to make any React component sticky, I just add to the class:
componentDidMount() {
StickyAdapter.makeItSticky(this, ".some-other-div-which-is-the-container");
}
Finally, the css for the sticky class:
.stick-to-top {
display: block;
position: sticky;
top: 0;
z-index: 10;
}
Hey this is and old question but for new visitors I think u just need to add this css code to #sticky:
#sticky { position:sticky;top:0; }
and no need for javascript.
sticky toggles between relative and fixed, depending on the scroll position.
and don't forget that, the parent also should not have overflow property
I want to make the menu fixed on top when window scroll down over 160 pixel, but if the body content is too short, it will become an infinite loop, because if I scroll down over 160 pixel, menu will become fixed which means scroll height will turn to under 160 pixel, so script will make the menu relative back, how to solve this.
Demo
HTML
<div id="header">header</div>
<div id="content">content</div>
JavaScript
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
if (scroll > 160) {
$('#header').css('position', 'fixed');
} else {
$('#header').css('position', 'relative');
}
});
CSS
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 60px;
background: black;
color: yellow;
position: relative;
padding: 6px;
}
#content {
width: 100%;
height: 780px;
background: gray;
}
when adding position fixed to menu, add also paddin-top for content (padding-top value equals header height + header top and bottom padding)
JS:
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
if (scroll > 160) {
$('#content').css('padding-top', '72px');
$('#header').css('position', 'fixed');
} else {
$('#content').css('padding-top', '0');
$('#header').css('position', 'relative');
}
});
fiddle
you do not need any javascript here...so remove all js... and edit your css:
#header {
width: 100%;
height: 60px;
background: black;
color: yellow;
position: fixed; /* make menu header always fixed */
padding: 6px;
top:0px;
}
#content {
width: 100%;
height: 780px;
margin-top:72px; /* margin top 72px because of header height is 60px + pedding 6px*2 */
background: gray;
}
I am planning a two-tier fixed position navigation at the top of my design.
As the user scrolls down the page, I would like the navigation to slide up until the first tier is mostly hidden.
If the user then hovers over the navigation, the container should slide down revealing the first tier again.
This hover effect should not fire if the user is at the very top of the browser window.
Additionally, when the user scrolls back to the very top of the page, the full two-tier navigation should again be fully visible as it is on the initial load.
I'm having trouble chaining these events together using javascript and have had to resort to a combination of CSS3 transitions and jQuery addClass/removeClass calls.
Additionally, I can only get the whole mish-mash to fire once. So once the user has scrolled down and back up there is no more animation.
My current code is viewable at this fiddle
Hopefully this gives an idea of what I'm trying to do.
Can anyone help me bring this monstrosity to life?
Code is as follows:
HTML
<div id="nav_wrap">
<div id="nav_one">
<h2>Nav One</h2>
</div>
<div id="nav_two">
<h3>Nav Two</h3>
</div>
</div>
<p>blah blah blah etc...</p>
CSS
#nav_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 100;
}
#nav_one,
#nav_two {
float: left;
width: 100%;
height: 48px;
background: #111;
}
#nav_two {
background: #1f4c6b;
height: 72px;
}
h2, h3 {
color: #fff;
}
#nav_wrap.fixed {
margin-top: -42px;
-webkit-transition: margin-top .5s ease-in-out;
box-shadow: 0 0 24px #111;
}
#nav_wrap.down {
margin-top: 0px;
-webkit-transition: margin-top .5s ease-in-out;
}
#nav_wrap.drop {
top: 42px;
-webkit-transition: top .5s ease-in-out;
}
#nav_wrap.up {
top: 0;
-webkit-transition: top .5s ease-in-out;
}
Javascript
var top = $('#nav_wrap').offset()
.top - parseFloat($('#nav_wrap')
.css('marginTop')
.replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > top) {
$('#nav_wrap').addClass('fixed');
$("#nav_wrap").hover(
function () {
$(this).addClass('drop');
},
function () {
$(this).addClass('up');
}
);
} else if (y == 0) {
$('#nav_wrap').addClass('down');
}
});
You're overcomplicating your approach. All you actually need to do is toggle one class on scroll in your JavaScript. This CSS will do the rest.
Note: The code will need prefixes added for other browsers (-moz, -o, -ms) and I would look at improving the performance of the addClass part of the call in scroll as the event will be getting called a lot.
An example fiddle can be found here.
CSS
#nav_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 100;
}
#nav_one,
#nav_two {
width: 100%;
height: 48px;
background: #111;
}
#nav_two {
background: #1f4c6b;
height: 72px;
}
h2, h3 {
color: #fff;
}
#nav_wrap{
-webkit-transition: margin-top .5s ease-in-out;
}
#nav_wrap.scroll {
margin-top: -42px;
box-shadow: 0 0 24px #111;
}
#nav_wrap.scroll:hover{
margin-top: 0px;
}
JS
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#nav_wrap').addClass('scroll');
}
else{
$('#nav_wrap').removeClass('scroll');
}
});