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.
Related
I would like to draw a <div> box with fixed height, width and scrollbars and register the location of the scrolled view. I have found the function scrollTop but don't know how to get the bottom scroll location.
Which CSS do I need to draw the box with scrollbars?
How can I access the left, right, top and bottom position inside (relative to) the box with Javascript?
I would use these 4 numbers to draw a <div> inside.
Starting with your second question:
scrollTop is the vertical position (in px) of the scrollbar, relative to the top position. So if your scrollbar is at the very top, scrollTop = 0.
It's the same for scrollLeft, but horizontal.
You can set these values via js to bring the scrollbar to a certain position programmatically.
So, if you want to know when the scrollbar is on top, you simply register an event listener for scrolling and wait for scrollTop = 0.
To check if the scrollbar is at the very bottom, you need a bit of calculation since you need to know the scroll height of the container (scroll height - scrollTop = 0).
See the following code (using jquery but it also works with plain js) which fires an event when the scrollbar reaches start or end position (this is for horizontal scrolling, so you have to replace "left" with "top" and "width" with "height"):
$('#yourDivId').on('scroll', function () {
if (scrollbarIsAtStart($(this))) {
$(document).trigger("scrollbar.left");
}
if (scrollbarIsAtEnd(this, $(this))) {
$(document).trigger("scrollbar.right");
}
})
const scrollbarIsAtStart = (jQuery) => {
if (jQuery.scrollLeft() == 0) {
return true;
}
return false;
}
const scrollbarIsAtEnd = (e, jquery) => {
//Minus one, probably rounding issue!?
if (jquery.width() + jquery.scrollLeft() >= e.scrollWidth - 1) {
return true;
}
return false;
}
So there are two events triggered, one for the scrollbar reaching start position, one for the end of the container. Now, you can listen to these events and handle them:
$(document)
.on('scrollbar.left', {}, function (event) {
//do whatever you want to do
})
Regarding your first question, I'm not a css expert, but if I look at bootstraps table-responsive class (which enables horizental scrolling), it looks like this:
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
Vertical scrolling is enabled by default if you define a fixed height on your div and the data exceeds this size. You can of course override the width with a fixed value or a different percentage.
I have two divs:
<div id="slide1">
<div id="wrapper">
What I want to do is that when the page is loaded wrapper in fixed position and it only becomes static when slide1 div is scrolled to the bottom which is partly hidden under wrapper div and if I scroll up wrapper becomes fixed again. Furthermore, when slide1 is scrolled to the bottom I want to make it go up with wrapper div together nice and smooth without any jumping and responsive also.
I have made this javascript code and it worked almost fine but was not responsive (I don't remember exactly how I thinked of if statment it was quite long time ago):
$(window).scroll(function() {
var a = $(window).scrollTop();
if(a*2 >= ($(window).height())+900) {
$(".wrapper").css({'position' : 'static' });
$("#slide1").css({'height' : 1600});
} else {
$(".wrapper").css({'position' : 'fixed' });
$("#slide1").css({'height' : 2000});
}
});
So what I want to know is how can I scroll the page down smoothly as I resize a div past the bottom of the browser.
So far what I have set up is that when you resize the div and it gets to the last 30px of of the browser, it starts to scroll the page down. That part works, but it's jerky when doing so.
My code:
// $maxHeight is set above this, it just takes all the elements within the div and and get's the total height and set that as maxHeight
$('.notifications-drop-down').resizable({
maxHeight: $maxHeight,
minHeight: 400,
handles: {
's': '.ui-resizable-s'
},
resize: function(event, ui){
if((ui.position.top + ui.size.height) > ($(window).scrollTop() + $(window).height() - 30)){
$(window).scrollTop($(window).scrollTop()+10);
}
}
});
What I tried to fix this:
Adding an animate function to the scrollTop to make it smoother
$('html,body').animate({scrollTop: $(window).scrollTop()+30}, 200);
But that does not work smoothly. I have changed the animation duration and it's still not smooth. Does anyone know what I can do it get this to be smooth?
Something I noticed was that when the page scrolls down it does not recognize that the div is in the bottom 30px so it's not recalculating if it should scroll down more (you need to wiggle your cursor while resizing the div for it to work), I did try and add the same code for scrolling down to the resizable's stop function but that didn't help as well.
Thanks for the time.
I am using the below function to scroll to a Div inside a Div.
It works but the car stays at last position so if the user scrolls it flashes to the original position. To clarify the scroll bar is actually at the top of the div but the user sees to bottom element but when user scrolls up he or she doesn't get the expected result of moving to the element right above the last they get bumped to the top.
jQuery.fn.scrollTo = function (elem, speed) {
$(this).animate({
scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top
}, speed == undefined ? 1000 : speed);
return this;
};
onclick="$('#usermessageDiv').scrollTo('.last_usermessage', 2000);"
$('.small-chat-box .content').slimScroll({
height: '234px',
railOpacity: 0.4
});
<div id="usermessageDiv" class="content" style="overflow: scroll; width: auto; height: 234px;">
The image below shows where the bar is vs the 2nd lower red arrow where the scroll bar should be in regards to the view shown.
SlimScroll has a scrollTo setting that you should use instead of your scrollTo function.
scrollTo - Jumps to the specified scroll value. Can be called on any
element with slimScroll already enabled. Example:
$(element).slimScroll({ scrollTo: '50px' });
You will need to use jQuery's position() method to get the scroll distance of the target element relative to the parent. If you need detailed help with that, please post some HTML for the usermessageDiv.
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',
});
}
});