js Make a smooth scroll - javascript

I seriously have a question about the scroll event. I tried to solve it all night but I couldnt.
I am trying stick a navigation on the top. The stick effect will process when $(window).scrollTop() pass the point right before the navigation.
The problem is, there will have a "blink" effect (its like delay process) on IE and Chrome but not on Firefox.
While on my research I knew that Firefox has "smooth scroll" by default.
However, please check this example on Chrome or IE
http://www.backslash.gr/demos/jquery-sticky-navigation/
It is so smooth like on Firefox, and the code is just that simple......
The point is, I am doing the exactly same thing like this example but why I have the 'blink' effect??
Is the trick on CSS ??
Is there any way that I can create a smooth scrool like what on firefox by js??
Thank you very much for your help.
$(window).on('scroll', Sticky);
function Sticky(){
$(this).scrollTop() > anchor.offset().top
? nav.css({ 'position': 'fixed',
'z-index': z_index,
top: y,
left: x, })
: nav.css({ 'position': 'static', });
};

I think you might be confusing two things here.
looking at the working code you have linked to. there is a blink in there if you scroll on chrome or IE or firefox using your mouse scroller.
The blink is because you are changing position suddenly. Try to change the js so it does animate the position rather than suddenly changing its value.
As others have said linking to a working code and expecting an answer by showing a trick might not help all of us. Try to add animate on position change line of js and see if that helps.
There is no trick here. Its all in code so read the source and enjoy.

Looking at the incomplete example code it's really hard to determine what's going on, so please either update your question with complete code, or better - upload a JSFiddle to serve us as an example and we can directly update it with necessary changes. So far (based on what I said before) it looks like you're getting a flickering effect due to typos in your example code:
? nav.css({ 'position': 'fixed',
'z-index': z_index,
top: y,
left: x, })
: nav.css({ 'position': 'static', });
where you're not terminating the array of CSS properties and values that needs to be applied (you're ending it with a comma ,), and you've not enclosed some CSS properties in a single quote '. Your code should be:
? nav.css({ 'position': 'fixed',
'z-index': z_index,
'top': y,
'left': x })
: nav.css({ 'position': 'static' });
That's of course provided you've already set variables z_index, y and x beforehand.
EDIT & DISCLAIMER: I've created a new JSFiddle with the original demo code. The demo you referred to is copyrighted, so please attribute your gratitude to the original author and not me, if that helps you out. The code I've posted JSFiddle with is available as a free download, though. So I guess it's OK to reuse it for demo purposes as well. Change that code to comply with your requirements and update it to new version each step you update it. It will help you track where you're doing something wrong (if at all). ;)

Related

Parallax 'background-image/position/attachment' jQuery animation is jittery

Here's the breakdown...
wrapper (position:relative; overflow:hidden; )
section-container (position:absolute)
multiple child sections
I attach a mousewheel event listener and animate (with easing) the 'top' position of 'section-container'. As this position changes, the 'background-position' of each section moves vertically based on the position of 'section-container's 'top' property (continually updated through a setTimeout()).
All of that works as it should, except as the 'background-position' changes, the image has a bit of a jitter. This doesn't happen if the 'background-attachment' is set to 'fixed'... but I don't want that.
Can anyone explain this, with a possible fix? I continually refer to the https://victoriabeckham.landrover.com/ site and can't figure out what they're doing differently to get theirs operating so efficiently.
You can check this out, i believe its where they do most of the animating:
https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471
I would have to say they have some kind of framework that they are using to accomplish this.
EDIT: Sorry didn't see the new answer above mine, seems like a good starting point.
-Ken
If you inspect this website carefully, you will able to use it like landrover site.
You need to use: scrollTo plugin and parallax plugin
And document jQuery should be like this:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
});
Ok. So I figured out my issue was when trying to animate() the 'section-container' on the 'top' property. I was using a "+=" to allow it to increment from its current position. Not a good idea when using 'mousewheel' events. I changed it to a hard-set variable that is continually incremented/decremented.

Navigation fade in after scroll down?

I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/
A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.
I tried to see how they did their code but i couldnt figure it out.
sounds like mootools tho?
If someone can help that would be awesome. thanks!
You can create such a menu using jQuery and CSS, swapping classes as needed when:
var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
//do something;
}
CSS: position : fixed, opacity : 0, height : 0; overflow : hidden
swap class to change height to fixed amount
animate({opacity : 1.0}, 'fast', function() {
//callback;
});
You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.
EDIT: Here's your fiddle.
http://jsfiddle.net/lazerblade01/fNn7K/26/
For anyone searching through stackoverflow here is my try:
$(function(){
// Check the initial Poistion of Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyheader').css('opacity', '1');
} else {
$('#stickyheader').css({position: 'static', top: '600px'});
$('#stickyheader').css('opacity', '0');
}
});
});
Here is a Fiddle DEMO http://jsfiddle.net/uFq2k/297/
It is a little modified version of this code: how can I stick the div after scrolling down a little
David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.
the twitter one can react to a particular element of interest coming into view.
walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.
http://davidwalsh.name/mootools-scrollspy
You could try Twitter's Bootstrap. Check out their second toolbar.

div max-height set dynamically using javascript

I have a web app using master page and content pages (see the attached image). I need to set max-width of one div in content page dynamically accordint to the browser window size (so that the whole app stays on the page, without scrolling). I couldn't find the sloution (or couldn't replicate the results) using just html and CSS. So I'm thinking to do it using javascript. But the problem is, I NEVER used it, so I really have no clue how to do it. I'd really appriciate if someone took a couple of minutes and write the function that will do it. As I see it, I should take difference in height between bottom edge of the header and top edge of the footer and subtract height values of searchbar and button bar.
EDIT:
Thanks to maxedison for providing that code. But, how do I use it? :D I'm a total noob. I have a problem, since I use masterpage and content pages. Where do I put that code?
EDIT 2 - THE ANSWER:
I looked a little further into how to use jQuery, and searched here some more, and I found a solution. Next time I start developing an application, I'll use jQuery from the bottoms up...It just simplifies some things so much. :)
So for the solution: It's similar to what maxedison suggested, but I changed it so, that I set height with CSS and I just added a fixed value to deduct from window.height.
<script type='text/javascript'>
$(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
$(window).resize(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
});
});
</script>
Using jQuery, it would look something like:
function resetHeight(){
var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight();
$('.content').height(newHeight);
}
$(function(){
newHeight();
$(window).resize(function(){
resetHeight();
});
});

tween back to auto-height with xuijs

I'm having problems to create a equivalent slideDown for xuijs.
The slideUp (hide) is easily done with
x$('elm').tween({height:'0'});
but there seem to be no way to revert back to original height using tween.
$x('elm').setStyle('height','auto !important');
works fine but no animation of course,
x$('elm').tween({height:'auto !important'});
does not work. (setting height to fixed value does however, but that's not an option).
Kind of stuck here, document.getElementById('target_box').clientHeight doesn't help either once the height is set to 0 by tween or setStyle. Only solution I can think of is storing the heights in an array before initial global collapse of divs.
thankful for any help.
(the divs affected uses overflow: hidden)
regards,
//t
If you're using html5 Why not store the height as a data- attribute before you call tween?
x$.extend({
'slideUp' : function(){
this = this[0];
x$(this).attr('data-h',this.clientHeight);
x$(this).tween({height:'0'});
},
'slideDown' : function(){
this = this[0];
x$(this).tween({height:x$(this).attr('data-h');});
}
});
this code is untested, but it's worth a shot.
Not sure if you have solved this but I got a solution. Pretty sure there are better ways but this seemed to do the trick.
emile.js and xui animation needing double click?
uses emile instead of tween but sure you could change it if you want however emile.js is in xui.

Order of properties matter with jQuery animate?

After just now spending too much time debugging why my jQuery animate() calls stopped working correctly, I realized my problem was the properties in the animate() call have to be in a specific order. So the following will not work properly:
$('div.example').animate({left: 50, top: 100, opacity: 1});
What will happen is the div.example will fade in (if it wasn't already) and will just appear at position left:50, top:100, it will not animate. To get this to work as expected, you have to reorder:
$('div.example').animate({opacity: 1, left: 50, top: 100});
I tested this in FF4 and Chrome. This surprised me as I wasn't even aware that Javascript guaranteed order of properties in objects and jQuery makes no mention of this requirement in their docs. So my question is basically, am I doing something wrong? Is this expected? Is there documentation on what the proper order is? Will this work properly in all browsers?
I'm using jQuery UI as well. I know that enhances the standard animate method to allow for animating colors and such. Is that potentially the issue?
This a jQuery bug: cannot animate position and opacity at same time but is fixed in 1.6.1
In the meantime, you can fix it by adding "px" on the end:
$('div.example').animate({top: '100px', left: '50px', opacity: 1});
Does your properties left and top are declared earlier in css? Some browsers (webkit if I remember correctly) have problems animating properties that weren't declared. Try setting left and top to 0 or some other values and see if it works.

Categories

Resources