I want to change the height of the header and add a class to it on the scroll. However I want to do it smoothly using the jQuery animate (or similar effect).
The idea is to make the header sticky on the scroll and remove the sub header from it when it is in sticky form. That's why I fade out subheader when it is being scrolled. Is there a better way to do that?
I have managed to do that with following code, however if you see the demo, the css changes are not smooth, it somehow jerky.
Demo:
http://jsfiddle.net/kcW9a/
Here's the code:
var height = $('header').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$("header .subheader").fadeOut(200);
$('header').addClass('stick');
$('header').stop().animate({'height' : '50'}, 200);
}else if($(this).scrollTop() <= height)
{
$('header').removeClass('stick');
$("header .subheader").fadeIn(200);
$('header').stop().animate({'height' : '100'}, 200);
}
});
$(window).scroll();
Change css style for fixed head with your sticky head effect
header{
height: 100px;
background: green;
position:fixed;
width:100%;
}
Try using a callback to the fadeOut() call. Fiddle: http://jsfiddle.net/myTerminal/kcW9a/1/
fadeOut(200, function () { $('header').addClass('stick'); });
$(window).scroll(function() {
if($('#main').offset().top === 0) {
$('.subheader').fadeIn(600);
$('#main').stop().animate({ height: '100px' }, 300).removeClass('stick');
}
else {
$('.subheader').fadeOut(1);
$('#main').stop().animate({ height: '50px' }, 300).addClass('stick');
}
});
Related
let's get straight to the point:
My code looks like the following:
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
</div>
</div>
</div>
And my css:
#keep_up {
position: fixed;
width: 13%;
}
#thread_menu{
height: 80vh;
width: 100%;
float: left;
position: relative;
}
Now i use this for a forum. and this is basically to show the active and new threads on the side of the screen.
However. When watching a thread, the header disappears (Wich makes sense because we are scrolling down).
but i want the thread menu to stay on my side (So that it is always visible). In this case that is happening because my keep_up div has position: fixed. But i only see half of the thread menu becuase it is too long and won't scroll up.
My question:
I want the thread menu to scroll up, untill it reaches the top of my window. From then on i want it to stay there.
How do i do this?
I saw a few examples but none of them worked for me.
EDIT: Code i tried:
<script src="jquery.min.js">
$(window).scroll(function () {
var margin = null;
$(window).on("scroll", function () {
var scrollHeight = $(document).height(),
scrollTop = $(window).scrollTop(),
offsetBottom = 110, // Offset depending on the height of the footer
offsetTop = 100, // Offset depending on the height of the header
positionTop = $(".keep_up").offset().top,
affix;
if (margin != null && (scrollTop + margin <= positionTop)) {
// The sidebar has reached the bottom and is still on the bottom
affix = false;
} else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
// The sidebar has reached the bottom
affix = 'bottom';
} else if (scrollTop <= offsetTop) {
// The sidebar has reached the top
affix = 'top';
} else {
// The sidebar is midway
affix = false;
}
// If the sidebar hasnot changed his state, return;
if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;
if (affix == 'bottom') {
margin = positionTop - scrollTop;
} else {
margin = null;
}
// If the related class is added to the div
$(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))
});
});
</script>
And the CSS:
.keep_up{
/*position: fixed;*/
width: 13%;
}
.keep_up.at {
top: 1px;
position: fixed;
}
.keep_up.at-top{
}
.keep_up.at-bottom {
top: 438px;
position: absolute;
}
modify this on HTML:
<div id="prevent"></div>
<div id="keep_up" data-spy="affix" data-offset-top="200">
Add this CSS:
.affix{position: fixed !important; top:0px; z-index:999;}
.affixpatch{margin-top:100px !important;}
this will fix the div when you scroll down 200px. Change data-offset-top value to reach it on different break point.
.affixpatch is a class that will be loaded with next jquery function. it prevents to hide content behind top fixed div. Change margin-top to another value if this don't solves the "hide content" problem that always generate affixing divs.
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".affix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('#prevent').addClass("affixpatch");
} else {
$('#prevent').removeClass("affixpatch");
}
});
});
</script>
Hope it helps. If not, you may have some class that rewrite or impede the correct function of this affix.
I've tested this hundreds of times, usually to fix navbars.
SCROLL:
Using overflow to scroll content:
#keep_up{
max-height:400px;
width: auto;
overflow:auto;}
This will scroll the content inside #keep_up div (or use it in another one)
NOTE: you must declare a fixed max height for this div. Set max-width only if you need.
You can use %, em, rem... no need to be px for fix the max witdth. (to get a responsive effect, use responsive measurements)
If I understand your scenario correctly, the way to do this might be to use jQuery (or native JS, but you've tagged jQuery so I'm assuming that's in play).
There's a plugin that handles this kind of thing: http://leafo.net/sticky-kit/
I'd suggest you look at the plugin source code to see how it works - an event handler function on $(window).scroll() which then toggles classes on your #thread_menu to fix it in place. To keep your code lightweight, you probably don't need everything the plugin provides.
I have the back to top button that appears when you reach a point on the page, which is working fine, however, when it appears the text is on two lines until the box has finished the animation to appear. So, is there anyway to prevent this? What I mean by the animation is: btt.show('slow');
Code:
$(document).ready(function () {
var btt = $('.back-to-top');
btt.on('click' , function(e) {
$('html, body').animate({
scrollTop: 0
}, 500);
btt.hide('slow');
e.preventDefault();
});
$(window).on('scroll', function () {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > 500) {
btt.show('slow');
} else {
btt.hide('slow');
}
});
});
Example: http://codepen.io/Riggster/pen/WvNvQm
The problem is caused by animating the width of a box, I think it might be better to animate the position of it instead, but - even better - lets use CSS animations!
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 500) {
$(".button").addClass('show');
} else {
$(".button").removeClass('show');
}
});
#wrapper {
width: 100%;
height: 2000px;
}
.button {
position: fixed;
bottom: 50px;
right: -100px;
/* You might still need prefixes here. Use as preferred. */
transition: right 500ms;
}
.button.show {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<div class="button">Here's my button!</div>
</div>
I've defined your button as hidden by default, by giving it a position of right: -100px. When we hit the correct scroll position, we add the class show and that triggers the animation performed by CSS and not javascript, as we have the transition property for the property right defined - that way the browser does the heavy lifting.
Toggling show/hide alters your elements width. You either have to put it in a container with display: inline
Or more ideally you might want to change show/hide to jQuery fadeIn() / fadeOut() which is more appropriate for "Back to Top" indicators.
Here is your codepen example modified with inline container:
http://codepen.io/anon/pen/MwWweY
I have a header which position:absolute on load I need to display it fix on particular scrolling so it working ..
but problem is that how I use header effect (i.e display with delay from upward) with position:fixed property.
code:
CSS
.iaw-header {
position:absoulte
}
JS:
{
if (jQuery(window).scrollTop() >= 700) {
jQuery('.iaw-header').css('position','fixed');
});
}
HTML
<div id="header">
Header text here.
</div>
CSS
.header { position: absolute; }
JS
if (jQuery(window).scrollTop() >= 700) {
$('#header').css('top', '-300px');
$('#header').css('position', 'fixed');
$('#header').animate({top: 0}, 1000);
} else {
$('#header').animate({top: '-300px'}, 1000, function () {
$('#header').css('top', 0);
$('#header').css('position', 'absolute');
});
}
So when the site loads (in CSS), the header can have top: -300px;, and when the user scrolls, you transition (or set) the header's top to 0px, so it scrolls down from the top.
$(window).scroll(function () {
var i = $('.iaw-header')
var h = i.outerHeight(true);
if ($(window).scrollTop() > h) {
if (!i.hasClass('fixed')) i.hide().addClass('fixed');
}
if ($(window).scrollTop() >= 400) {
i.slideDown('fast');
} else {
i.removeClass('fixed').show();
}
});
Add a class in your style:
.fixed {position: fixed;top:0; left:0;width: 100%; }
Perhaps, not the best code but still you can start building on it and modify to make it better. Here is the Jsfiddle link :http://jsfiddle.net/lotusgodkk/gxRC9/200/
Now it may be a little bit of a dumb question (probably is), but i just can't wrap my head around it. So i have a navigation bar that is horizontally and vertically centered with a button inside of it. If you click the button the nav bar animates to the top of the page with a little bit of margin left. What i'm trying to achieve is when the button is clicked again the nav bar would animate back to it's original position. I've tried many lines of code and i still can't get it right (shouldn't even be that hard). Any help is appreciated.
JavaScript:
$("#btn").click( function(event){
$("#wrapper").animate({
'top': 100
}, 400)
});
CSS:
#wrapper {
position:absolute;
top:50%;
margin-top:-100px;
left:0;
width:100%;
}
#nav {
margin:20px auto;
height:200px;
width:900px;
text-align:center;
background-color:#bca;
border:1px solid green;
}
JSFiddle here.
You could use something like that:
DEMO jsFiddle
$("#btn").click( function(event){
this.toggle = !this.toggle;
$("#wrapper").stop().animate({
'top': this.toggle?100:"50%"
}, 400)
});
You can introduce a clicked variable which can tell you if it has been clicked or not (or similar) then on 1st click, move up, on second click, move down and so on.
JSFIDDLE LINK
var clicked = false;
$("#btn").click( function(event){
clicked = !clicked;
if(clicked)
{
$("#wrapper").animate({
'top': '-=100'
}, 400)
}
else
{
$("#wrapper").animate({
'top': '+=100'
}, 400)
}
});
You can achieve this using jquery UI switchClass plugin. or in a ugly way by updating your code like:
$("#btn").click( function(event) {
var top = $("#wrapper").css('top') == '100px' ? '50%' : 100;
$("#wrapper").animate({
'top': top
}, 400)
});
my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks
You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.
Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});