How to make div appear from the top when scrolling down? - javascript

I would like a div to appear and slide down once you scroll pass the header.
Here's what it should look like:
http://www.space.com/11425-photos-supernovas-star-explosions.html
Here's what I got so far but it's not working.
http://jsfiddle.net/nHnrd/

You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.
For example:
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;
Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.

You might want to just show and hide your div rather than pseudo class AND hide and show
initially:
$("#mydiv").hide();
then (on scroll):
$("#mydiv").show();
set what you want your div to look like i.e. 0,0 and fixed
Use the Keep It Simple method!

I've updated your jsfiddle with something you can try.
Try this:
http://jsfiddle.net/nHnrd/10/
Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Related

Adding offset().top amount on scroll

I have a fixed piece of text and I'm trying to add a different class each time the text enters a div on scroll. I've got it working no problem. But if I add an offset amount to the fixed text e.g.
top: 400px
I need to counter this offset in the JS. But I can't seem to figure it out. I've tried using:
.offset().top 400);
But it's not working. Here's a code i'm currently using:
HTML
<p class="text">TEXT HERE</p>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
JS
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
$('.text').toggleClass('blue',
scroll >= $('.section1').offset().top
);
$('.text').toggleClass('magenta',
scroll >= $('.section2').offset().top
);
$('.text').toggleClass('green',
scroll >= $('.section3').offset().top
);
$('.text').toggleClass('orange',
scroll >= $('.section4').offset().top
);
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed
The text needs to add class as soon as it enters the relevant div.
Here's a working fiddle: http://jsfiddle.net/6PrQW/334/
So you did most everything right, but I think where you went wrong is here: var scroll = $(window).scrollTop();
You don't want to calculate using the window offset, rather you want to use the offset of your sticky text. So instead use: var scroll = $('.text').offset().top;
Let me know if that helps.
edit,
and here is your fiddle with the edits.
Note that I edited your line for setting the blue class since you don't want to match the sticky offset against itself.
To find out when something is within your window, you've gotta use something like...
if($(elem).offset().top - $(window).scrollTop < $(window).height()){
//stuff
}
That should trigger as soon as elem is visible on the page! You can check it against $(window).height()/2, for example, if you want it to trigger in the center of the page instead. Hope this helps!

how to get the height of an element and then apply that value through css

I am trying to get the height of my navigation and apply it to a margin-top so I can offset my banner. My navigation is fixed so I'm trying to compensate for that so my banner isn't hidden underneath.
// Offset Banner to Height of Navigation
function bannerOffset() {
var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
}
This, I thought would do it, but it doesn't reflect anything at all in the front-end.
UPDATE
$(document).ready(function() {
var bannerTop = $('.x-navbar').outerHeight();
$('.x-main').css('margin-top', bannerTop);
$(window).scroll(function() {
var bannerTopScroll = $('.x-navbar.scroll').outerHeight();
if ($(document).scrollTop() > 1) {
$('.x-main').css('margin-top', bannerTopScroll);
}
});
});
So I thought I had this, but on load, the margin-top of .x-main is 245px. When I scroll it becomes 85px. I can see the numbers go down to that. The issue is when I scroll back up to the top the value doesn't go back to 245px. It's not very consistent, but I often get 144px. I should add that, and this is probably why, I have another function that changes the height of my .x-navbar when .scroll is added to it.
$(window).scroll(function() {
if ($(document).scrollTop() > 1) {
$('.x-navbar').addClass('scroll');
} else {
$('.x-navbar').removeClass('scroll');
}
});
So I am not sure how to make this all smooth and working properly. If I reload the page the .x-mainis back to 245px. When I scroll back to the top it's not calculating properly.
Your code works. Maybe you want to use $.outerHeight() instead, your selectors are wrong, or you're experiencing margin collapsing.
It's worth noting that $.height() returns an integer value, so in your $.css() line, you should change bannerTop to bannerTop + 'px' so that the CSS has a unit and not just a number... but it looks like jQuery is doing that automagically for me here. You might try it and see.
var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x-navbar">x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br></div>
<div id="banner-carousel">banner carousel</div>

How to stick a div at the bottom of the page while scrolling after checkbox is checked

Usually I don't ask questions...I'm looking for a solution until I give up,
and this is the case here.
There are many similar questions to my but after a thorough search I found nothing.
So the question is:
After selecting a checkbox the div at the bottom of the page
shuold be sticky untill the user scrolling down to the original place where it was.
I have a great example from kickstarter web site :
If only I could know how they do it :)
If I was not clear enough I'd love to explain myself better.
Thanks in advance
After clicking on checkbox,
You can add these CSS lines to div
position:fixed;
bottom:0;
you want to add position: fixed and attach it to the bottom of the container when checked
html
<div class="wrapper">
<input type="checkbox" id="check"/>
<div id="foot"></div>
</div>
js
var check = document.getElementById('check');
var foot = document.getElementById('foot');
check.addEventListener('change', function () {
if (check.checked) {
foot.style.position = 'fixed';
foot.style.bottom = 0;
}
});
fiddle - http://jsfiddle.net/qak2ept6/
EDIT - http://jsfiddle.net/qak2ept6/1/ restore when unchecked
EDIT EDIT - http://jsfiddle.net/qak2ept6/3/ attach on scroll
when you check the check box. create div with position fixed and store the offset of the bottom edge of the window that would be normally your window height. Assign scroll event and keep checking if the scroll value is equal to the offset you have stored and when it reached just remove the fixed position from the div.
My guess (and if I was doing it) It'll be done by monitoring scroll position and applying a css style or not accordingly.
Something like
Inject it in invisible state in to the document
Note it's position (y coord)
Apply class to make it stick to the bottom of the window and show
On scroll, as soon as you get near the expected yCoord, remove the class and let it assume it's rightful place in the document
On further scroll (when you scroll away), re-apply class until you scroll back
HTH
If i have understood your question, I guess what you want is here
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
If not, please explain us with more code and what exactly you need

How to detect when at the bottom of a scrollable div?

I created a website that loads data as you scroll down. Every time you hit the bottom of the page, it loads another 100 rows. I'm trying to replicate this in a div so that the header is always at the top no matter how far you scroll down.
I'm using JQuery and the scrollTop() function to do this.
Here is my code that works if it is not detecting the scroll bar in the div, but the whole window.
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
for(i; i < size+100; i++){
document.getElementById('myTable').innerHTML += IPAMArray[i];
}
size = i;
}
});
Now i change the div to this:
<div class = "tableDiv" id="myTableDiv" style="height:800px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>
I dont know how to change this line from "document" and "window" to the correct div variables:
if ($(window).scrollTop() == $(document).height() - $(window).height()){
Here is where i'm currently at with that line:
if ($("div.tableDiv").scrollTop() == $(document).height() - $("div.tableDiv").height()){
I've tried quite a few variants, but i'm completely guessing the code so it could take forever. I would prefer to refer to this div by its ID rather than its class, but i just started using the class references because thats how most of the examples are online. I have tried $(document).getElementById('myTableDiv') in various ways as well but cant seem to find the solution.
if ($("#myTableDiv").scrollTop() == $("#myTable").outherHeight() - $("#myTableDiv").height()){
use ids to identify elements
the height of the inner element is what you need ($("#myTable").height())
jquery's height() function doesn't include borders margins and / or paddings as noted in the doc. Use outherHeight() instead.
OR
make your header position: fixed in css

Make a div appear when scrolling past a certain point of a page

My goal is to make a fixed div appear at the top of a page once someone scrolls a certain amount of pixels down the page. Basically once the header section is out of view, this div will appear.
I've looked at code similar to what I want; however, haven't seen anything that would allow me to easily modify the pixel count from the top of the page (if possible).
Here is a piece of code I saw dealing with making divs appear by scrolling.
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
I just want to know how to make it appear. If someone knows of a piece of code already in tact with a slide up and slide down animation, that would be greatly appreciated as well but not required.
window.addEventListener("scroll",function() {
if(window.scrollY > 500) {
$('.fixedDiv').slideDown();
}
else {
$('.fixedDiv').slideUp();
}
},false);
Brandon Tilley answered my question in a comment...
You would change the first line, with the startY, to be the specific Y
position you need, rather than calculating based on the header's
position and height. Here's an updated fiddle:
jsfiddle.net/BinaryMuse/Ehney/1
window.addEventListener("scroll",function() {
$('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);
DEMO: http://jsfiddle.net/DerekL/8eG2A/

Categories