I want to make my header content (logo) slide away to the left on scroll, leaving the fixed menu left. I have gotten the content to disappear but the slide itself is from top to bottom which makes it just appear as a longer scroll more than a slide away effect.
What I'm trying to accomplish is something like this header or similar: http://lifeinthegrid.com/simple-css-fixed-header/
As you see, once you scroll the header makes a really nice slide away to the left and leaving a fixed menu hanging.
This is the code I have been using so far:
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
$("#header_content").hide(300);
} else {
$("#header_content").show(300);
}
});
</script>
The code makes the div disappear but not with a nice slide away to the left.
you can use jquery ui.
$('#header_content').hide("slide", {direction: "right" }, 1000);
read the docs for more information.
Try using
$("#header_content").animate(function(){
right: 9999;
}, 300});
To animate the css right property to 9999, and again back to 0. You will need to have position set to something other than static in your CSS for this to work.
Source(s)
jQuery API - .animate()
Related
I am using jquery-smooth-scroll for controlling anchor scrolling. There is a feature/option to decide behaviour after scroll. I chose to hide the button after it gets to the bottom anchor. I then implemented some jquery to bring that button back when scroll was no longer 100% at the bottom of the page.
What I am struggling to do is make sure that the button always fades away when scroll is 100% down. The same way a standard back to top works but opposite ends of the page in my case.
Please see this fiddle I have put together https://jsfiddle.net/k253jvt8/
/* show and hide button*/
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) {
if (document.body.scrollTop == 0) {
$('.saveForm').fadeIn();
//below isnt working to fade away .saveform when scroll is 100% bottom
} else {
$('.saveForm').fadeOut();
}
});
The above is the code I use to bring back the button after it disappears, but then cant get it to disappear again when manually scroll to the bottom, it only disappears again when I use the button to get to the bottom - have a play with my fiddle and you will see what I mean.
In your fiddle, your wrapping <div class="reportFormPage"> is positioned absolute in relation to the document.
As a result your <body> element does not take it in to account when determining its height; hence it always has a height value of 0. Because of this your 'else' condition never occurs.
Removing the position: absolute; css rule resolves this issue.
Try this
if ($(window).scrollTop() ==0) {
$('.saveForm').fadeIn();
} else if($(window).scrollTop() < $(document).height()) {
$('.saveForm').fadeOut();
}
});
along with removing position:absolute as dommmm has said.
Here is the working fiddle https://jsfiddle.net/sd6sh4v6/2/
See if you like the change I brought to your smoothScroll by using no-js fallback.
I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);
I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});
I am trying to create a jquery animated loginbox.
I am a total javascript/jquery noob.
I have a div that contains the loginbox. That div is about 150px in height, and it is placed at the top of the page, so that only the bottom 15px of the div are visible when the page is loaded.
I am trying to slide down the div so that the rest of the login box is revealed on click, and make it slide back up when the bottom part of the div is clicked again.
Now, I am doing:
$('#showLogin').click(function(e){
$('#formContainer').animate({top: "+=135px"} , 1500)
e.preventDefault()
})
What this does is animate the slide down of the div. But how can I check if it has already been slided down so I can slide it back up?
Should I check for the position of the div and decide if it should move up or down, or is there a better way to do it?
The website is here
I think you are looking for .slideToggle(). An example: http://jsfiddle.net/FL4zZ/
Try this jsFiddle example. It animates a div with a form within it on click, and retracts it once it's fully extended.
The basic jQuery is:
$('div').click(function() {
var pos = $(this).css('top')
if (!$(this).is(':animated')) {
if (parseInt(pos, 10) == 0) {
$(this).animate({'top': '-35px'}); // anim up
}
else {
$(this).animate({'top': '0px'}); //anim down
}
}
});
I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/