$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$("#maincontainer").mousemove(function() {
// $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
$('#DivToShow').html("Y " + mouseY + " --- " + "X " + mouseX);
if (mouseY > 230) {
$('html, body').animate({
scrollBottom: $elem.height()
}, 800);
}
});
});
pls help, I am trying to make a auto page up and down scroll based on pointer position. when pointer coming to bottom of browser, page need to scroll down 60px ++. not a single scroll to end of page.
Try this solution.
On mousemove, get the clientY and the window height. If the difference is less than 60, then scroll 60 more than the current scrollTop:
$(document).on('mousemove', function(e) {
var y = e.clientY;
var h = $(window).height();
var n = h - y;
if (n < 60) {
var t = parseFloat($(window).scrollTop());
console.log(t);
$('html,body').animate({scrollTop:t + 60 + 'px'},200);
} else {
$('html,body').stop();
}
});
#wrapper,
.section {
width:100%;
float:left;
}
.section {
height:80px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
Related
I am working on the below code. Why am I not able to detect which div is reaching at the top of page in both down or up scroll?
$(window).scroll(function() {
$(".container").each(function() {
var $that = $(this);
var po = $(this).offset().top;
if (po >= 0 && po <= 300) {
console.log($that.data('map'));
}
});
});
.container {
height: 690px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-map="One">One</div>
<div class="container" data-map="Two">Tow</div>
<div class="container" data-map="Three">Three</div>
<div class="container" data-map="Four">Four</div>
<div class="container" data-map="Five">Five</div>
You'll need to use $(window).scrollTop(); as well as $that.outerHeight()
$(window).scroll(function() {
var windowScrollTop = $(this).scrollTop(); // window scroll top
$(".container").each(function() {
var $that = $(this);
var po = $that.offset().top;
var poHeight = $that.outerHeight(true); // the height of the element
var distanceTop = 100; // the distance from top to run the action .. it can be 0 if you want to run the action when the element hit the 0 top
if (windowScrollTop + distanceTop >= po && windowScrollTop + distanceTop <= po + poHeight) {
if(!$that.hasClass('red')){ // if element dosen't has class red
console.log($that.data('map'));
$(".container").not($that).removeClass('red'); // remove red class from all
$that.addClass('red'); // add red class to $that
}
}
});
}).scroll(); // run the scroll onload
.container {
height: 690px;
}
.container.red{
background : red;
color : #fff;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-map="One">One</div>
<div class="container" data-map="Two">Two</div>
<div class="container" data-map="Three">Three</div>
<div class="container" data-map="Four">Four</div>
<div class="container" data-map="Five">Five</div>
I want to hide all elements but the first one so I use $(".item:not(:eq(0))").fadeOut();
I have elements with the same class "item":
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth Item</div>
Then when I scroll to the next element which could be "second , third,fourth item" , I want to show it
I tried using :
function isScrolledIntoView(elem)
{
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function() {
jQuery(".news:not(:eq(0))").each(function(index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).fadeIn(10000);
}
});
});
But it doesn't work with my method because the height of the body changes on showing the next item "Second Item" , So All the items are shown when I scroll to the "Second Item" or any other item.
How to hide the items but the first one and then fadIn() each on scrolling to it ?
This is using offset() in jquery. This demo will trigger function if
your element is completely in your viewport.
Tip:You need to take care of inner as well as outer height of element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
height:200vh;
}
#test {
top: 100vh;
padding: 10px;
width: 300px;
position: relative;
border: 1px solid black;
height:100;
}
</style>
</head>
<body>
<p>scroll to test</p>
<div id="test">
<p>Click the button to get offsetTop for the test div.</p>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var x = $("#test").offset();
var height1 = $("#test").outerHeight();
var y = document.documentElement.scrollTop;
var z = (x.top + height1) - y;
if(z < $(window).height()){
alert("fumction");
}
});
});
</script>
</body>
</html>
It will be more easy to use the combination of waypoint.js and animate.css.
Add animated class to every element to be animated. You can use any of the animate.css effects.
Change the offset { offset: '80%' } to control when the animation can start.
<div class="animated waypoint-slideup">
</div>
$('.waypoint-slideup').waypoint(function () {
$(this).addClass('slideInUp');
}, { offset: '80%' });
Use this in the css file
.waypoint-slideup{
opacity:0;}
.waypoint-slideup.slideInUp{
opacity:1;}
Im trying to make autoscroll when user cursor reach almost end of viewport.
I wrote the code below but it works only once, meaning the first time the user close to the bottom it autoscroll 300px down and stop.
how can I make it go down as long as the user is at the end of viewport?
and why it only works once?
$(window).mousemove(function (e) {
var currposition = currentYPosition() + 800;
var MouseY = event.clientY;
if (MouseY > currposition-100) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 1000);
}
});
You can use this simple code
$(".autoScrollBox").mousemove(function(e){
var clientY = e.clientY;
var boxHeight = $(this).height();
var contentHeight = $(".autoScrollBox")[0].scrollHeight;
var mousePositionProportion = clientY / boxHeight;
var scrollTop = mousePositionProportion * (contentHeight - boxHeight);
//// Top
if (clientY < boxHeight / 2)
scrollTop -= 50;
//// Bottom
else if (clientY > boxHeight - (boxHeight / 2))
scrollTop += 50;
$(".autoScrollBox").scrollTop(scrollTop);
});
.autoScrollBox {
height: 150px;
overflow-y: hidden;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="autoScrollBox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
</div>
See better example in JSFiddle
I have this markup.
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
With .col-md-4 has relative position, when I try to attach mouseover event to the .col-md-4 and get position of its offset it's return wrong offset for second .col-md-4 in second row. Here is the script
$('.col-md-4').hover(function(){
var offset = $(this).position();
var height = $(this).height();
console.log(offset); // this gives the wrong offset when hovering over second col-md-4 in second row
$('#shadow2').stop(true, true).animate({
'left': offset.left,
'top': offset.top + height + 10
});
}, function(){
$('#shadow2').animate({
'left': '-350px'
});
});
try using .offset(), it gives position of element relative to document, change
var offset = $(this).position();
to
var offset = $(this).offset();
Update::
$('.col-md-4').hover(function(){
var childPosition = $(this).offset();
var parentPosition = $(this).parent().offset();
var actualOffset = {
top: childPosition.top - parentPosition.top,
left: childPosition.left - parentPosition.left
}
var height = $(this).height();
console.log(offset);
$('#shadow2').stop(true, true).animate({
'left': actualOffset.left,
'top': actualOffset.top + height + 10
});
....
I have the following code which fixes the position of a menu at the point that it is going to scroll off the top of the page.
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
}
});
css
.container {
width:400px;
margin:auto;
}
.header {
background-color:#096;
height:150px;
}
.fixed {
position:fixed;
top:0px;
left:50%;
margin-left:50px;
}
.bodyContainer {
overflow:hidden;
}
.menu {
float:right;
width:150px;
height:250px;
background-color:#F00;
}
.bodyCopy {
float:left;
width:250px;
height:1000px;
}
.footer {
background-color:#096;
height:250px;
}
HTML
<div class="container">
<div class="header">
<p>Test Header</p>
</div>
<div class="bodyContainer">
<div class="menu">
<p>test</p>
</div>
<div class="bodyCopy">
<p>test</p>
</div>
</div>
<div class="footer">
<p>Test Footer</p>
</div>
What I now want to do is make it start scrolling again when the user reaches the bottom of the page (so that it does not cover the footer in the page).
jsfiddle here...
Here is new a approach with css3.
use position:sticky to follows the scroll.
Here is the article explained.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
with sticky position demo
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
$(window).scroll(function(event) {
var y = $(this).scrollTop();
var z = $('.footer').offset().top;
if (y >= top && (y+_height) < z) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
http://jsfiddle.net/AlienWebguy/CV3UA/1/
If you want the menu to simply stay where it is when it reaches the footer you'll need to add more logic to append it into the DOM:
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
var _original_top = $('.menu').offset().top;
$(window).scroll(function(event) {
var y = $(this).scrollTop();
var z = $('.footer').offset().top;
if (y >= top && (y + _height) < z) {
$('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').addClass('fixed');
} else {
if ((y + _height) >= z) {
$('#menu').insertBefore($('.footer')).removeClass('fixed').addClass('stuck-bottom');
}
else $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').removeClass('fixed');
}
});
}
I'm sure there's a more elegant way to do this. Play around :)
http://jsfiddle.net/AlienWebguy/CV3UA/2/