For whatever reason using element.offset().top or element.position().top as the value of scrollTop compels the browser to scroll well past the given element.
I've tried console-logging the $(window).scrollTop() and element.offset().top, and before anything happens the readouts are as expected:
$(window).scrollTop() == 0
element.offset().top == 999
However, when the animated scroll completes the readouts are not entirely as I would expect them to be:
$(window).scrollTop() == 999
element.offset().top == 831 (Unexpected, shouldn't it be 0?)
So I guess to one degree or another the question becomes: Why is the element's offset barely effected if the browser is scrolled 200vh?
(I am using parallax on the splash page, so could this be the culprit? Can adjusting the transform: translate(X,Y) of elements above during the scrolling process be effecting the offset of the given element?)
HTML
<body>
<div id="splash"></div>
<div id="sect1">
<div id="text">
</div>
</div>
<div id="sect2"></div>
</body>
CSS
body {
overflow: hidden;
}
#splash {
height: 200vh;
width: 100vw;
position: relative;
}
#sect1 {
height: 100vh;
width: 100vw;
position: relative;
}
#sect2 {
height: 100vh;
width: 100vw;
position: relative;
}
#downbtn {
width: 50px;
position: fixed;
}
jQuery
function scroll() {
var downbtn = $('#downbtn');
var sect1 = $('#sect1');
$('html, body').animate({
'scrollTop' : sect1.offset().top
});
});
$(document).ready(function(){scroll();});
Related
I am working on a project based on a big image (7000 X 5321). The image will be like a huge map. At the center of this map the user will have the main interest point so my aim is that once the page loads, this spot needs to be in the center of the viewport and from there, the user will scroll horizontal or vertically.
My problem is that while I can adjust the scroll position with my script I need this page to be responsive so the adjustments to center this spot needs to be done based on the window viewport and not based in the size of the image and no idea if this can be done.
In the snippet below you can see my actual code and my problem. I have centered a red square inside the container. if you check the snippet at full page in a panoramic screen the spot is centered (more or less) as I would like it but it won't work if the window width or height changes (as you can see in the small window)
Any help or idea I could work on would be greatly apreciated.
$(document).ready(function() {
$('html, body').animate({
scrollTop: ($('body').height() / 2 - 450)
}, 0);
$('html, body').animate({
scrollLeft: ($('body').width() / 2 - 1000)
}, 0);
});
html,
body {
margin: 0;
height: 5321px;
width: 7000px;
}
.contenedor-mapa {
height: 5321px;
width: 7000px;
position: relative;
background-color: grey;
}
.center {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contenedor-mapa">
<div class="center"></div>
</div>
I'm not sure how to to it 100% with jQuery, but what you need is something like:
$('html, body').animate({
scrollTop: $('body').height() / 2 - window.innerHeight / 2
}, 0);
$('html, body').animate({
scrollLeft: $('body').width() / 2 - window.innerWidth / 2
}, 0);
Found the way to do it. It was not as difficult as I thought. Diego Cesar gave me the hint I needed.
$(document).ready(function() {
$(window).resize(function () {
var viewportWidth = $(window).innerWidth();
var viewportHeight = $(window).innerHeight();
$('html, body').animate({
scrollTop: ($('body').height() / 2 - viewportHeight / 2)
}, 0);
$('html, body').animate({
scrollLeft: ($('body').width() / 2 - viewportWidth / 2 )
}, 0);
}).resize();
});
html,
body {
margin: 0;
height: 5321px;
width: 7000px;
}
.contenedor-mapa {
height: 5321px;
width: 7000px;
position: relative;
background-color: grey;
}
.center {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contenedor-mapa">
<div class="center"></div>
</div>
I am making a website and this is my current setup:
http://puu.sh/hU5KJ/421b5aa76d.png
I have 2 main divs, at first the bold one is displayed in full browser window, and after clicking the button, whole window is scrolled down to the 2nd div. The divs are literally placed as in the picture, with the lower div being off screen and the scroll down function is a simple javascript.
My main question here is, can this be done in any alternative way? This feels kinda wrong, also whenever i'm at the lower div and resize the height of the browser window it all gets messed up.
EDIT:
I'd like to have it so that its impossible to scroll by any other means than just those buttons (no arrowkeys, no mouse wheel and preferably no pg down/up buttons). Is that even possible?
HTML buildup:
<div id="wrapper">
<div id = "overall"></div>
<div id = "chat"></div>
</div>
With "overall" being the bolded div on the image and "chat" being the lower one. There is plenty of other things i have placed inside of these divs, if you want the full code i can post it, but this is mostly about switching between these 2 only.
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#wrapper {
overflow-y: hidden;
overflow-x: hidden;
}
#overall {
background-color: red;
height: 100%;
width: 100%;
text-align: center;
}
#chat {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
And the JS function that scrolls:
function scrollDown() {
$('html, body').animate({
scrollTop: $("#chat").offset().top
}, 1000);
}
function scrollUp() {
$('html, body').animate({
scrollTop: $("#overall").offset().top
}, 1000);
}
My knowledge level is low and i guess you can see i only understand the most basic stuff for now, so please explain your answers. Thanks for any help.
The key is using the CSS width:100% & height:100% properties. These will make sure your element is always sized to the full size of your browser. Even when you resize it.
$(document).ready(function() {
$("#scroll-down").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block2").offset().top + 'px'
}, 'slow');
})
$("#scroll-up").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block1").offset().top + 'px'
}, 'slow');
});
});
html,
body {
height: 100%;
}
.full-size {
display: block;
width: 100%;
height: 100%;
}
#block1 {
background-color: red;
}
#block2 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
<div class="full-size" id="block1">
scroll down
</div>
<div class="full-size" id="block2">
scroll up
</div>
</div>
EDIT: included JS smoothscroll
I am following this parallax tutorial that uses only jQuery. I slightly modified the HTML:
<section id="home" data-type="background" data-speed="10">
<article data-speed="1">One</article>
<article data-speed="20">Two</article>
</section>
<section id="about" data-type="background" data-speed="10">
</section>
css
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And the jQuery:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
This code moves everything in a section at the same speed, but I would like to have the <article> text move at a variable speed different (defined in the <article data-speed>) from the background image.
I wasn't sure how to move the text because background-position is for images, and I tried adjusting top but that didn't have any effect. I also tried setting transform: translateZ(); on the article css, but this also did not work.
How can I add different speeds to the <article> texts? I'd also like to stick to jQuery in the spirit of the example.
try modifying markup always wrapping the article with a section, for ex.:
<section id="about" data-speed="4" data-type="background">
<article>One</article>
</section>
<section id="home" data-speed="20" data-type="background" >
<article >Two</article>
</section>
edit--explanation
this is the source of your parallax jquery script:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
as you can tell what it's doing is slowing down the scroll of the section[data-type="background"] with a factor of data('speed');
This kind of script is built in a way to have one layer of parallax, if you want more parallax layers check wagersfield's parallax script
I am searching for a jQuery-solution for my fixed header. If the user scrolls down, the header shall shrink in the same way the scrolling position is until a minimum height is reached.
Example:
scrolling position: 0
div height: 250px
scrolling position: 85
div height: 165px (=250px-85)
scrolling position: 435
div height: 100px (=minimum height)
Here is the quick fiddle.
body {
height: 1000px;
}
.header {
position: fixed;
background-color: lightblue;
height: 250px;
width: 100%;
}
<div class="header"></div>
Here is the solution for me: fiddle
You can use a combination of the Window Scroll Event and scrollTop() function to achieve the same.
$(window).scroll(function(){
var distanceFromTop = $(document).scrollTop();
if(distanceFromTop < 84 )
{
// set div height to 250px
}
else if(distanceFromTop == 85)
{
// reduce the div height
}
else if(distanceFromTop > 85 && distanceFromTop <= 434)
{
// do something with height if required
}
else if(distanceFromTop > 434)
{
// set div height to 100px
}
});
DEMO
This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much
you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}
As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>