// IGNORE THIS CODE
$(document).ready(function(){
$("#sticky-header").hide();
});
// IGNORE THIS CODE
Here is my code: http://jsfiddle.net/de74ezo5/14/
So what I was trying to achieve here was to make the pink header collapse and stay fixed at the top of the page after scrolling past the top red header. I am using Transit with jQuery to create the transition (http://ricostacruz.com/jquery.transit/). I don't know a more efficient way; Easing doesn't satisfy my needs.
The transition, for some reason, isn't repeating after scrolling back to the top, and then past the red header again.
This is what I need help with:
How do I make the transition repeat after scrolling back to the top, and then past the red header again?
How can I adjust the speed of the transition?
The problem is your sticky-header div's css is getting a transform: rule added to it on initial scroll down. When you scroll back up, this rule remains even though you hide it (which only changes display:block to display:none)
Page Load:
<div id="sticky-header" style="display: none;"></div>
Scroll down:
<div id="sticky-header" style="display: block; **transform**: translate(0px, 60px);"></div>
Scroll back up: You can see transform is still there even though display = none
<div id="sticky-header" style="display: none; **transform**: translate(0px, 60px);"></div>
Scroll back down: Rule already fired, will not re-fire unless removed.
<div id="sticky-header" style="display: block; **transform**: translate(0px, 60px);"></div>
In your else, you need to alter the css and remove that transform rule so that it refires:
$('#sticky-header').css({
"display" : "none",
"transform" : ""
});
Also, side performance note:
Every time your window scrolls below 160px, your transition is fired. You can see here as I keep scrolling lower and lower, the event is repeatedly fired (you can see it ran 6 times as I mouse wheeled down the page)
Add a check in there so .transition is only fired once: You can do this with jQuery data:
$(document).data('scrolled', false);
Full code:
$(document).ready(function() {
$("#sticky-header").hide();
$(document).data('scrolled', false);
});
$(window).scroll(function(){
if( $(document).scrollTop() > 160 ) { // do transition
if (!$(document).data('scrolled')) {
$('#sticky-header').show();
$("#sticky-header").transition({ y: 60 });
$(document).data('scrolled', true);
}
}
else { //show original header
$('#sticky-header').css({
"display" : "none",
"transform" : ""
});
$(document).data('scrolled', false);
}
});
FIDDLE
Related
Im using the slideUp function to slideup and down an adblock message, but when you see the adblock alert, after you scroll down, it takes a second for the navigation bar to adjust to the top. It gives the whole process a buggy look--this change should be instant and perfect.
you can see an example here: https://www.mallyear.com/search?q=phone
the code Im using for the slideUp function is this:
jQuery(window).on("scroll", function(){
// adblocker is the Id for the ad message
// t3-header is the Id for the Nav bar
var startY = 1;
if(jQuery(window).scrollTop() > startY){
jQuery('#adblocker').slideUp("fast");
jQuery('#t3-header').css({position: 'fixed', top: '0px'});
}else{
jQuery('#adblocker').slideDown("fast");
jQuery('#t3-header').css({position: 'static', top: '80px'});
}
});
To see this adblock notification, is needed an extension like "Ad Blocker Plus" on Google Chrome, and you should have it running. The bug shows when scrolling down just for a second but is there. Many thanks for the help
I can't be sure that this is what you're looking for, but I imagine you want to have the css for t3-header be changed only after the slide has completed, right?
If so, anything you want to happen once the slide is finished should be in a function passed as an additional argument to the slideUp/slideDown function. For example:
jQuery('#adblocker').slideUp("fast", function() {
jQuery('#t3-header').css({position: 'fixed', top: '0px'});
});
If that's not the cause of the problem my apologies!
EDIT
After the comments I wonder if maybe you should cut out the slideUp animation all together, and just have the navBar stay fixed to the top once the user has scrolled beyond the adblock div (150px as I understand it). I would change the code to this:
if(jQuery(window).scrollTop() > 150){
jQuery('#t3-header').css({position: 'fixed', top: '0px'});
}else{
jQuery('#t3-header').css({position: 'static'});
}
EDIT 2
Ok one more option, but this would require changing how your elements are set up.
The problem with having the ad-blocker slide up is that by definition the user will already have scrolled down a bit, so by the time the ad-blocker div has fully slid up, the navbar will have already gone over scroll-top, only to snap back down again once its css has been changed to fixed.
So what you need is to have both the navbar and the adblocker div be in one fixed, container div. This will nullify the need to change the css of the navbar itself, and you can use the slideUp animation on adblocker with it ending in the correct place. So you have:
<div id ="navContainer" style="position:fixed; top:0px">
<div id = "adblocker" class = "container-fluid">
...
</div>
<div id = "t3-header" class="container t3-header">
...
</div>
</div>
(you could put that css in your css file once you're happy with what you have of course)
And in javascript you have:
if(jQuery(window).scrollTop() > 1){
jQuery('#adblocker').slideUp("fast")
}else{
jQuery('#adblocker').slideDown("fast")
}
I suspect that will provide the effect you're hoping for.
I'm using a tiny library called '$.scrollTo' to animate a scroll to a div element in my html. at the top of my page I have a fixed navgation bar.
at the end of the animation, I would like to have that div focused (for accessibility). if my div is to large, at the end of the animation, the fact that it gets focus - simply sends it a bit off the screen.
This does not happen with small divs.
here is my code (check jsfiddle below):
$('#buttonid').on("click", function() {
//fixed nav bar height (to compensate when scrolling)
var fixed_navbar_height = $("#navbar-id").height();
//the element to scroll to
var $go_to_selector = $("#topic2");
$.scrollTo($go_to_selector, {
duration: 1000,
offset: -fixed_navbar_height,
onAfter: function() {
//if you comment out this .focus it works as intended.
$go_to_selector.focus();
}
});
});
here is a JSFIDDLE example:
https://jsfiddle.net/dy35obpq/3/
obviously the onAfter messes it up, but i would like both the animation and the focus. Any ideas on how to implement a focus on a large div without letting it change the scroll bar ? suggestions are more than welcome.
Try this.
onAfter: function() {
$go_to_selector.focus();
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
}
I have simply added this line in your onAfter callback.
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
and it seems to have fixed the problem while still retaining focus. You might want to use css to disable the focus blue highlight.
Hello i have a problem with my navbar.
I want to animate it on scroll and change his height. When i scroll a bit down it should animate smaller and when im at the top of the page it should aniamte bigger. The standard height is 100px. The problem is when im at the top of the page it takes a delay, which i need to wait, until it animates. They delays gets longer if i scroll first to the bottom of the page and then back to the top. The has a height of 11000px. This is my code for it:
$(document).on("scroll",function(){
if($(document).scrollTop()>500)
{
$( ".navbar" ).animate({height: 50} ,{duration:100});
}
else if($(document).scrollTop()==0)
{
alert("dhsihsp");
$( ".navbar" ).animate({height: 100} ,{duration:100});
}
});
Maybe u can help me. I use Google Chrome and Bootstrap 3.
The problem you are having is that the "scroll" fires every single time the scrollbar moves. So every single time the scrollbar moves a pixel, it will do the IF checks. That's why you delay your animation for so long. The queue of things to run stacks up immensely if you move the scrollbar too much.
DEMO
The scroll event seems to fire a lot when you scroll so all the events get queued. So the event that actually changes you header seems to take a long time to appear.
I added a css transition on the height of a .navbar. for making this happen almost instantly. Are the events not still there? True, but changing css is a lot less demanding then adding animations (with a duration of 100ms). The transition does have a duration but it does not have to finish so an other event can come in at any time.
CSS
.navbar {
transition: height 0.1s;
}
Jquery
$(window).scroll(function () {
var scrollh = $(this).scrollTop();
if (scrollh == 0) {
$(".navbar").css({
'height':'100px',
});
} else {
$(".navbar").css({
'height':'50px',
});
}
});
I am diving into 'Parallax scroll' styled web pages, I can style all my main sections correctly with background image animations however when I break it down further into individual div animations I am getting stuck.
Example: Once the browser scroll hits 900px it activates a div to animate in from the left. It slides all the way into place. What I am trying to accomplish is that the animation is controlled by the user scroll completely (only animates on scroll). Hope this makes sense
Fiddle: http://jsfiddle.net/WW8xF/
HTML
<section id="one"></section>
<section id="two">
<div class="contentBox">I am a box</div>
</section>
jQuery
$(window).scroll(function(){
if($(window).scrollTop()<500) {
$('.contentBox').stop().animate({ left: -500 }, { duration: 500 });
} else {
$('.contentBox').stop().animate({ left: 100 }, { duration: 500 });
}
});
In this case you don't want to use animate, you want to control the position of your element yourself based on the scroll position of the window. Something like this:
http://jsfiddle.net/WW8xF/1/
$(window).scroll(function(){
var position = Math.min($(window).scrollTop()-700, 100)
$('.contentBox').css({ left: position });
});
You can adjust the logic of position here to affect when it moves, where it stops, etc.
I'm trying to hide a div on click (well i'm trying to slide it to the left), but what it will have to do is also from the main page div swap the background and also i think, swap the width of another div. I've got it swapping the background and removing the things I don't want (although they slide down rather then to the left)
This video shows what happens (and then at the end i use firebug to show you what i want to happen) http://www.youtube.com/watch?v=tti_L_ofelg&feature=youtu.be (edit: video online now)
Here is my html for the sliding div:
The CSS:
.slidingDiv {
}
.show_hide {
display:none;
}
And the jQuery:
var defOpen = 1;
jQuery(".slidingDiv").show();
jQuery(".show_hide").show();
jQuery('.show_hide').click(function(){
if(defOpen == 1)
{
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripeclear.png) fixed 0 0 repeat-y")
jQuery("#primary_right").css("width","")
jQuery(".slidingDiv").slideToggle();
defOpen = 0
} else {
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripe.png) fixed 0 0 repeat-y")
jQuery(".slidingDiv").slideToggle();
defOpen = 1
}
So it's bgwrap that has the image in it that i have to swap to a clear one (to stop it being there as it's a fixed image on the left)
and primary_right seems to be the one when I remove the width goes full screen (what i'm really trying to acheive)
It also needs to be able to toggle closed and open!
Thanks for any help you can give!
question is not clear..but as far as i understood...you want to hide a left side division by which the right side division occupies full screen and vice versa..is it?????
if yes defOpen variable will not help u..use JQuery toggle function...datz the best way to do it...
I think you need to set the width to "inherit". That's essentially what you're doing when you are selecting the delete style in Firebug.
jQuery("#primary_right").css("width","inherit")