Currently, I’m using the following formula:
var scrollTop = $(this).scrollTop();
$('.item').css({opacity: 100 / scrollTop});
But if you watch on the home page of my website, its stops fading at one moment,
Someone please guide me better formula
My website
You should try this:
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
Source: https://codepen.io/nickcil/pen/sfutl/
I've used this JS code to achieve what I believe you're trying to do here, before on a couple of sites I've built:
$(window).scroll(function(){ // standard JS document open
$(".top_section").css("opacity", 1 -
$(window).scrollTop() / 260); // set where you want fade to begin
});
Related
First, thanks in advance for any help.
Second, I would like to mention that I have looked at different questions related to this topic as well as read documentation for both animate() and scrollLeft() on MDN I think my question is actually more based on syntax rather than function usage and that is why the other questions have not been as helpful to me.
Now, on to the issue. I am attempting to modify javascript code that I have previously written so that one function can react to the viewport of any user.
On the HTML side, I have a table with one <tr> and 3 <td>'s. The 3 <td>'s are filled with a picture and info and when the user clicks on buttons below, the table scrolls itself to the appropriate content. The buttons work fine. The problem is actually that the images are bigger than the viewport (on any device) and so on initial page load, the image needs to be scrolled by a distance proportional to both the viewport and the asset size (I load different assets based on viewport also). The formula for scroll distance, I discovered, is
0.5( assetWidth ) - 0.5( viewportWidth ).
So, here is the JS I have come up with (this is all inside a jQuery(document).ready(function($){
var scrollDistance;
if ($('#interactive-row:visible').length == 0) {
//Viewport > 801px
var assetWidth = 1920;
console.log("bouta set scrolDistance");
scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
} else {
//Viewport < 800px
var assetWidth = 1428;
scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
}
//scroll to zero so that whne user goes "back" slider position is reset (w/o variable lastClick gets messed up)
$('.table-container').animate({
scrollLeft: 0
}, "slow");
console.log( "Scroll Distance is " + scrollDistance + " calculation is about to begin." );
//move slider to middle of SSI screen
$('.table-container').animate({
scrollLeft: += scrollDistance.valueOf()
}, "slow");
The problem (I believe) is on the second-to-last line at which point my intentions are to have the browser scroll to whatever number is inside scrollDistance.
Note: here is what firefox and chrome say: "SyntaxError: expected expression, got '+='[Learn More]"
Also, I have already tried using scrollDistance with out adding the .valueOf(). I put that on recently in case there was some sort of type issue in javascript that I wasn't aware of.
Feel free to take a look at this graphic to better understand what I am trying to do. Graphic of what browser should display
Thanks in advance for the help, I am new to Javascript and anything at all that you all can tell me (even just general pointers about how I write my code) is much appreciated!
Edit: It just occurred to me that it may also worth noting that my console.log() is not working at all but I could care less about that if the scroll starts working :D
I have an idea for a website but I am not yet sure on how to achieve the desired result. The end product would be a website where a series of visible connected nodes are generated based on data that comes back from a database.
The first concern is that I will need the website to accommodate any generated content which could span in any direction.
So does anyone know how to achieve an 'infinite' scrolling website? I have seen this kind of thing for online idea boards where the user can move their mouse in any direction and the page begins to scroll, with the page expanding seemingly infinitely.
You can try something like this:
// Fetch variables
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
var bodyHeight = $(document).height() - windowHeight;
var scrollPercentage = (scrollTop / bodyHeight);
// if the scroll is more than 90% from the top, load more content.
if(scrollPercentage > 0.9) {
// Load content
}
The first thing that strikes my mind on the concept of infinite scrolling is Facebook! The page at qnimate might be the code you are looking for -
qnimate.com/facebook-style-infinite-scroll
For infinity scrolling in either direction you will have to tweak the code to include window.pageXOffset
Other links that I would recommend checking out is -
sitepoint.com/jquery-infinite-scrolling-demos/
tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs
i'm pretty sure a few of you guys know the website medium.com articles page.
For example, here: Click
There is a very "easy" effect on this page when you scroll down – opacity and transform changes. Not a big deal at first sight. I've implemented the same effect probably more then 10 times on websites already.
But if you take a closer look at it, you can see how absolutely perfect smooth this is. Seems like the text is perfectly gliding above the surface. (Im checking it on the latest Chrome)
I was keen if this is just imagination, and quickly built up the same thing to check this. So i came up with this code:
var windowTop;
var limit = 420;
function parallax(){
parallaxElem.css({
"opacity": (1 - (windowTop / limit)),
"-webkit-transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)",
"-ms-transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)",
"transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)"
});
}
$(window).on('scroll', function(){
windowTop = $(window).scrollTop();
parallax();
});
And it's by far not as smooth as the code on the Medium website.
Anyone any idea, what they are doing to get this super smooth scroll transform effect? I just can't find it out – their code is too complex/too compressed for me, to get any information out of it.
Thank's a lot for any answer in advance!
Regards
Mark
The biggest improvement is to go from this:
$(window).on('scroll', function(){
windowTop = $(window).scrollTop();
parallax();
});
to:
$(window).on('scroll', function(){
window.requestAnimationFrame(parallax);
});
Store windowTop inside of the parallax function. There's no point in making that an out of scope variable.
Additionally, although you don't have it in your sample code "parallaxElem" should be an out of scope variable, because you don't want to do a DOM search for the element on every scroll.
I'm working on this site (http://styleguide.co/medhelp/) that has 5 sections. For one of the sections (Styles), I've got a sidenav I'm trying to get to stick in the visible frame only as long as users are scrolling in that section.
Here's what I've done thus far - I'm telling the section title & sidenav to stick after the top of the section has begun:
$(window).scroll(function(event) {
var sw = $('.fixed'),
pg = $('.styles'),
diff = pg[0].offsetTop - window.pageYOffset;
if (diff < 80 ) {
$('.fixed').css('position', 'fixed');
$('.fixed').css('top', '160px');
$('.styles').css('position', 'fixed');
$('.styles').css('top', '70px');
}
else {
$('.fixed').css('position', 'relative');
$('.fixed').css('top', '0px');
$('.styles').css('position', 'relative');
$('.styles').css('top', '0px');
}
});
I can't seem to figure out a good way to make the section title "Style" and the sidenav appear/disappear while I scroll to/from that section. Any advice? What could I do better? A simple solution demo in jsfiddle would really help!
Please click on this link & scroll down/up to know what I'm referring to: http://styleguide.co/medhelp/
I'm not going to give you a fiddle, but you need to determine when the next section would stick based on its offset from the top. At the moment what you are doing is:
// if difference top and element < 80 -> fix to top, else position is relative
First of all this means the condition will never be undone. What you need to do in order to continue is:
// once next contact section comes into screen
//(offset from the top of the screen <= screen height), give
var winHeight = $(window).height();
var calcTop = 80 - (winHeight - (winHeight - $('#nextSelector').offset().top);
$('.fixed').css('top', calcTop);
This will give the illusion of your text scrolling up as the new section comes up. I hope this helps. Also, when scrolling back up it doesn't re-stick, but you probably are aware of that.
Lately, I have been working on a website where I want to shoot specific effects at different scroll positions. I am using Velocity JS for the animation.There is an element where I want to have an automatic scroll to another specific scroll position. This can be easily achieved using Velocity JS. Below is the piece of code which illustrates the case:
$(window).scroll(function(){
if($(window.scrollTop() > 100)
{$('#element').velocity('scroll',{duration: 1000, offset:500});}
});
So now when the scroll position is more than 100 the element will be automatically scrolled to an offset of 500.Now the problem here is that once the animation is executed the scroll gets stuck and gets unstable. So the question is, How to get rid of this issue ? Why is this happening ? Is there an alternate way to achieve what I want? Here is a Fiddle that elaborates the issue:
http://jsfiddle.net/zubairanwar2/65xCP/58/
I am fairly new in using velocity Js so please advice me and help me. Thank you !
Alright I found the solution from jQuery itself. Instead of just calling the function like this :
$(window).scroll(function(){
if($(window).scrollTop() > 100 && $(window).scrollTop() < 500) // > 100 AND < 500
{$('#element').velocity('scroll',{duration: 1000, offset:500});}
});
We can use , $(document).one('scroll',function(){});. What it does is it will run the function atmost once. So the above code can be re-written as:
$(window).scroll(function(){
if($(window).scrollTop() > 100)
{
$(document).one('scroll',function(){
$('#element').velocity('scroll',{duration: 1000, offset:500});
});
}
});
And thats the solution so far I got and it works like a charm. Please comment if there is anything wrong with this code or if you want to add something more. Cheers!
Here is what you have, with my comments to help you understand what is happening (if you don't already):
$(window).scroll(function(){ //when you scroll...
if($(window).scrollTop() > 100) //if you are > 100 px from the top of the page...
{$('#element').velocity('scroll',{duration: 1000, offset:500});} // scroll to 500
});
When you are scrolled to 500 px, you are more than 100px from the top, right? So every time you scroll, it is scrolling you back to 500.
Here is the solution to your problem: Just change the if statement so that velocity only fires when you actually want it to:
$(window).scroll(function(){
if($(window).scrollTop() > 100 && $(window).scrollTop() < 500) // > 100 AND < 500
{$('#element').velocity('scroll',{duration: 1000, offset:500});}
});
If you want to be able to scroll back up from 500, then change it to something smaller, but still larger than 100, such as 120.
P.S There is a syntax error in your code, but as you said that it is partly working I assume it is a typo.. but here it is anyway: $(window.scrollTop() is missing a closing bracket around window; i.e $(window).scrollTop()