I'm trying to move an element to left and right while scrolling up and down in this example FIDDLE the problem is the div will keep moving to reach out of the page and doesn't return to its original position. This is the example I'm trying to simulate Original Example
HTML
<div class='container'>
<div class='inner'>
</div>
</div>
JS
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
var offset = $(".inner").offset();
var w = $(window);
var x = offset.left;
console.log(x);
$(".inner").css("left",x+50);
} else {
var offset = $(".inner").offset();
var w = $(window);
var y = offset.left;
console.log(y);
$(".inner").css("left",y-50);
}
lastScrollTop = st;
});
CSS
.container{width:100%; position: relative; float:left; background:#fff; height:1200px;}
.inner{width:150px; height:100px; position:absolute; top:20%; left:10%; background:red;}
You need to offset it by the scrolled amount, not move it by an amount each time. You are queuing up multiple moves and adding 50px each time.
var offset = $(".inner").offset();
$(window).scroll(function(event) {
var st = $(this).scrollTop();
$(".inner").css("left", st + offset.left);
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/x0vtopzv/1/
Once it is locked to the scrolling, you can adjust the position using a multiplier on the st value.
Note: JSFiddle has an 8px margin on the body. That throws out the offset position and needs to be removed or taken into account.
https://jsfiddle.net/TrueBlueAussie/x0vtopzv/6/
Related
i don't know what should be the question title..sorry for this.
but i explain that what i want to do.
i have a div with class name "scroll-inner-container" this div height is 70vh.
when my mouse hover into this div from top to 10% (this is the mouse hover area 0% to 10% in this div) and bottom to 10% then a function will start.
How can I measure this area into this div by using js...?
My html code looks like:
<div class="scroll-inner-container">
<div class="paragraph-space content">
<h1>top position</h1>
<p>Lorem ipsum dolor...</p>
<h1>end position</h1>
</div>
my css code here for this div:
.scroll-inner-container{
height: -moz-calc(70vh + 0px);
height: -webkit-calc(70vh + 0px);
height: calc(70vh + 0px);
overflow: auto;
object-fit: cover;
background-color: yellow;
position: relative;
}
I've previously used code similar to this for a project, copied from a previous question How to get mouse position - relative to element
var x,y;
$("#div1").mousemove(function(event) {
var offset = $(this).offset();
x = event.pageX- offset.left;
y = event.pageY- offset.top;
$("#div1").html("(X: "+x+", Y: "+y+")");
});
Once the mouse goes past a specified point on the Y axis, you can execute your code.
I think this code segment will help you. It will check the mouse position with your parent container, You can call your function inside the if condition.
var obj = $('.scroll-inner-container');
var top, left, bottom, right;
var excldH,objHeight,objWidth;
getPos(obj)
//Calls fuction on mouse over
obj.mousemove(function(e) {
handleMouseMove(e)
});
//Get position of mouse pointer
function handleMouseMove(e) {
var posX = e.clientX;
var posY = e.clientY;
if(posY > top+excldH && posY < bottom - excldH){
//Here your stuffs go
console.log(posX)
console.log(posY)
}
}
// Get position of the div 'scroll-inner-container'
function getPos(obj) {
var offsets = obj.offset();
objHeight = obj.height();
objWidth = obj.width();
excldH = objHeight/10; //Caculating 10% height
top = offsets.top,
// left = offsets.left,
bottom = top+objHeight,
// right = left+objWidth
}
Here is a jsfiddle for that
I tried to add here as snippet, but didn't worked. You can inspect the result on console.
I have this jsfiddle: https://jsfiddle.net/3ncyxnzt/
It currently works well as far as always stopping at a specified margin from the top of the page, but I'd like to make it also stop at the bottom, before it goes under/over the footer. Any ideas on how to make that moving red box stop right above the green footer? The height of the footer is 1000px, so I'd somehow need to set the moving box to stop at 1000px from the bottom.
Here's the code I have so far:
(function(jQuery) {
var element = jQuery('.move'),
originalY = element.offset().top;
var topMargin = 110;
element.css('position', 'relative');
jQuery(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 200);
});
})(jQuery);
I modified following line by adding static value 290 and it reached to bottom.
scrollTop - originalY + topMargin + 290
Is this what you trying to achive?
(function(jQuery) {
var element = $('.move'),
originalY = element.offset().top,
otherDiv = 1000,
staticHeight = $('.other-div').height()-$(element).height(); // Fixed number to stop the move-element before the footer
var topMargin = 110;
jQuery(window).on('scroll', function(event) {
var offset = element.offset().top;
var scrollTop = $(window).scrollTop();
// Check if the move-block gets under the footerblock
if(scrollTop < otherDiv){
element.stop(false, false).animate({
top: scrollTop - originalY + topMargin
}, 200);
}else{
element.stop(false, false).animate({
top: staticHeight //If so, make sure it gets on top of the footerblock staticly
}, 200);
}
});
})(jQuery);
I think you need an if/else statement to check if the block gets behind the height of the div called "other-div".
See the working example here: https://jsfiddle.net/crix/z578c9bo/
Hope it helps!
I am trying to implement a sidebar to follow the user's screen as he or she scrolls up or down in the browser page. However I am getting an issue where the sidebar continues to scroll down the page infinitely if the user keeps scrolling down.
var element = $('#movingBox'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 100;
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
});
Is there a way to limit the sidebar from scrolling too far down than its supposed to?
I hope I have understood your question. You want to stop the box following at a certain position like this ?
var element = $('#movingBox'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 100;
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
var stop = $('#stop').offset().top; // or in pixel
stop -= $('#movingBox').height() + topMargin;
if (scrollTop<stop) {
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
}
});
Try the example in JSFiddle
It's easy to keep a column in my layout fixed so it's always visible, even when the user scrolls down.
It's also easy to only move the column down the page when the page is scrolled down far enough for it to be out of the viewport so it's anchored before scrolling starts.
My problem is, I have left hand column that is taller than the average window so you need to be able to scroll down to see all the content (controls) in the left column but at the same time when you scroll up you want to see the top of the controls again.
Here's a visual of what I want to accomplish:
So the left column is always occupying 100% of the height of the window but as the user scrolls down they can see the bottom of the div, and when they start to scroll up the scrolls up until it reaches the top of the window again. So no matter how far they scroll the page, the top of the div is always nearby.
Is there some jQuery magic to make this happen?
Did you mean something like this? (Demo)
var sidebar = document.getElementById('sidebar');
var sidebarScroll = 0;
var lastScroll = 0;
var topMargin = sidebar.offsetTop;
sidebar.style.bottom = 'auto';
function update() {
var delta = window.scrollY - lastScroll;
sidebarScroll += delta;
lastScroll = window.scrollY;
if(sidebarScroll < 0) {
sidebarScroll = 0;
} else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) {
sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2;
}
sidebar.style.marginTop = -sidebarScroll + 'px';
}
document.addEventListener('scroll', update);
window.addEventListener('resize', update);
#sidebar {
background-color: #003;
bottom: 1em;
color: white;
left: 1%;
overflow: auto;
padding: 1em;
position: fixed;
right: 80%;
top: 1em;
}
body {
line-height: 1.6;
margin: 1em;
margin-left: 21%;
}
It almost degrades gracefully, too…
I made a fiddle for you, hope this helps you out abit.
I detect scroll up or scroll down, and set the fixed position accordion to the direction.
http://jsfiddle.net/8eruY/
CSS
aside {
position:fixed;
height:140%;
background-color:red;
width:100px;
top:20px;
left:20px;
}
Javascript
//Detect user scroll down or scroll up in jQuery
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('html').bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
$('aside').css('top', '20px');
$('aside').css('bottom', 'auto');
}
else{
$('aside').css('bottom', '20px');
$('aside').css('top', 'auto');
}
});
http://jsfiddle.net/KCrFe/
or this:
.top-aligned {
position: fixed;
top: 10px;
}
with
var scrollPos
$(window).scroll(function(event){
var pos = $(this).scrollTop();
if ( pos < scrollPos){
$('.sidebar').addClass('top-aligned');
} else {
$('.sidebar').removeClass('top-aligned');
}
scrollPos = pos;
});
I have the following code to make some parallax niceness which is mapped to the scroll bar.
It moves both the background position of the section and any elements in the section classed "mover"
It works fine with jQuery 1.4.x but when we upgraded to 1.5.2 the elements don't quite get back to their original positions
Does anyone know what changes in 1.5 would cause this?
var lastScrollTop = 0
var scrollTop = 0
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
var move = lastScrollTop - scrollTop;
lastScrollTop = scrollTop;
$('.mover').each(function(i, element){
element = $(element);
if(!belowTheFold(element)){
var currentPos = parseInt(element.css("top"));
var speed = $(this).attr('data-scroll-speed');
var pos = currentPos + (move*speed);
element.css('top', pos);
}
});
$('.background-mover').each(function(i,element){
element = $(element);
if(!belowTheFold(element)){
var currentPos = parseInt(element.css("background-position-y"));
var speed = element.attr('data-scroll-speed');
var pos = currentPos + (move*speed);
element.css('background-position-y', pos);
}
});
});
function belowTheFold(element){
var fold = $(window).height() + $(window).scrollTop();
return fold <= element.offset().top;
}
HTML:
<section class="background-mover" data-scroll-speed="0.1" style="background:url(images/background.jpg) no-repeat; /*background-size:cover;*/ ">
Places
Nature
Landscape
Adventure
</section>
<section class="background-mover" data-scroll-speed="0.2" style="background:url('images/background-2.jpg') no-repeat; height:630px; ">
Getting Around
Events
Accomodation
</section>
<section class="background-mover" data-scroll-speed="0" style="background:url(images/background-3.jpg) no-repeat; /*background-size:cover;*/ height:1200px; ">
Culture
Must Do's
Getting Here
History
Facts
</section>