How can I center the div using the window scroll event? I am searching for this answer for a long time. Any help would be appreciated.
$(window).scroll(function() {
var offSetTop = $("#ifOne").offset().top;
var positionTop = $("#ifOne").position().top;
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Some Content</div>
A simple demo shows how to center the div:
$(window).scroll(function() {
var offSetTop = $("#div1").offset().top;
var positionTop = $("#div1").position().top;
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var top = scrollTop + (windowHeight - $("#div").height())/2
$('#div1').css('top', top)
});
#container{
position: relative;
height: 200vh;
width: 100%;
}
#div1{
position: relative;
margin: 0 auto;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1">
Some Content
</div>
</div>
Related
I'm trying to get an image to scroll slower than other elements on a site with the div class slow-image however the JQuery doesn't seem to do anything. Does anyone know why?
CSS:
.slow-image
{
position: absolute;
width: 25vw;
top: 10vw;
margin-left: 60vw;
}
HTML
<div class="slow-image"><img src="..."></div>
JQuery
$(document).ready(function(){
var $win = $(window);
$('slow-image').each(function(){
var scroll_speed = 0.8;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});
How can I detect if the user scrolls to end of an <embed> element?
<embed src="contract.pdf" type="application/pdf" width="800" height="800" id="contractPDF">
I used this code but it doesn't work:
$('#contractPDF').bind('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert("end reched");
}
});
First, you need to know where your element begins and where it ends, so that when you scroll down, you know if you already pass that point.
$(window).scroll(function() {
// Fetch the embed container.
var container = $('#contractPDF');
// Height of our window.
var windowHeight = $(window).height();
// Container information.
var containerHeight = $(container).height();
var containerBottom = container.offset().top + containerHeight;
// Location of our window in our page.
var windowLocation = $(this).scrollTop();
// Check if we are past it.
if (windowLocation + windowHeight > containerBottom) {
alert('reached');
}
});
#contractPDF {
height: 900px;
width: 200px;
background-color: blue;
position:relative;
display:block;
}
#contractPDF2 {
height: 900px;
width: 200px;
background-color: red;
position:relative;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contractPDF"></div>
<div id="contractPDF2"></div>
I have sidebar that following by scrolling.
If the sidebar reach down to footer, how to stop to follow?
This is what I tried so far here.
$(function() {
var floatPosition = parseInt($("#left_menu").css('top'));
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var newPosition = scrollTop + floatPosition + "px";
var newPosition2 = scrollTop;
$("#left_menu").stop().animate({
"top" : newPosition2
}, 400);
}).scroll();
});
.left_menu{position:absolute;top:0;left:0;width:100px; height:330px; margin-top: 30px; background:green}
#footer { background:gray; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id="left_menu" class="left_menu">menu</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer">foot</div>
Please help
You should check if bottom position of #left_menu is greater than top position of #footer, prevent increasing it. Note that you should remove CSS margin-top of #left_menu
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $("#left_menu").height();
var top = $("#footer").offset().top;
if (scrollTop+height > top)
scrollTop = top-height;
$("#left_menu").stop().animate({
"top": scrollTop
}, 400);
}).scroll();
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $("#left_menu").height();
var top = $("#footer").offset().top;
if (scrollTop+height > top)
scrollTop = top-height;
$("#left_menu").stop().animate({
"top": scrollTop
}, 400);
}).scroll();
.left_menu{
position:absolute;
top:0;
left:0;
width:100px;
height:330px;
background:green
}
#footer {
background:gray;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left_menu" class="left_menu">menu</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer">foot</div>
<br><br><br><br><br><br><br><br>
Here is an example of what i want to achieve:
https://www.flambette.com/en/
I have tried to change the css properties of images but that effect does not satisfy my needs.
I have tried the following code:
mydocument.on('scroll',function() {
if (mydocument.scrollTop() > 10 && mydocument.scrollTop() < 200 ) {
$('#first').css('top', '320px');
$('#first').css('left', '215px');
$('#first').css('transition', '0.5s');
}
else {
$('#first').css('top', '300px');
$('#first').css('left', '200px');
$('#first').css('transition', '0.5s');
}
});
This is supposed to move an image when you scroll between 10 and 200 px.
var container = document.getElementById('container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('square')[0];
var square2 = document.getElementsByClassName('square')[1];
// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop/scrollArea || 0;
square1.style.left = scrollPercent*window.innerWidth + 'px';
square2.style.left = 800 - scrollPercent*window.innerWidth*0.6 + 'px';
});
body {
overflow-x: hidden;
}
.container {
width: 100%;
height: 1000px;
}
.square {
position: absolute;
}
.square-1 {
width: 100px;
height: 100px;
background: red;
top: 600px;
}
.square-2 {
width: 120px;
height: 120px;
background: black;
left: 800px;
top: 800px;
}
<div class="container" id="container">
<div class="square square-1"></div>
<div class="square square-2"></div>
</div>
Hope to help you.
Here you can see more examples about movable elements and scroll events.
I have a div with a background color that is fixed in the browser.
Scrolling through the site, I want the text color to change from black to white when it meets this overlay, then back to black again as it leaves it. This isn't really possible in css yet, so how can I set this in jQuery?
I'm using the ScrollTo plugin (http://flesler.blogspot.com/2007/10/jqueryscrollto.html) for my scrolling.
fiddle (css and html):
http://jsfiddle.net/L76NP/
html:
<body>
<div id="wrapper">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
<div id="overlay"></div></body>
css:
body {color: #000000}
#wrapper { margin-left: auto;
margin-right: auto}
.section {
height: 300px;
width: 400px;
margin: 0 auto;
padding: 15px;}
#redbox {
background-color: #FF0000;
position: fixed;
top:100px;
bottom: 200px;
left: 0;
right: 0;
z-index: -100;}
Try this out:
http://jsfiddle.net/ALcm6/3/
Basically checking if the section fits within the box, and if so it's changing the text color. You can alter this for your specific needs.
$(window).scroll(function () {
var redbox = $("#redbox");
var redBoxTop = redbox.position().top;
var redBoxBottom = redBoxTop + redbox.outerHeight();
$(".section").each(function () {
var section = $(this);
var sectionTop = section.position().top - $(window).scrollTop() + 15;
var sectionBottom = section.position().top - $(window).scrollTop() + section.height();
if ((sectionTop >= redBoxTop && sectionTop <= redBoxBottom) || (sectionTop <= redBoxTop && sectionBottom >= redBoxBottom) || (sectionBottom >= redBoxTop && sectionBottom <= redBoxBottom)) {
section.css("color", "white");
} else {
section.css("color", "black");
}
});
});
$('#redbox').css('background-color','rgb(255,255,255)');//it's css controller
this is scroll event:
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('#redbox').css('background-color','rgb(255,255,255)');
} else {
$('#redbox').css('background-color','rgb(0,0,0)');
}
});
http://jsfiddle.net/LQ9QP/
it's a sample code And You can customize it.