Javascript to make div appear after scroll is showing on page load? - javascript

I input this code (which I pulled from this answer: Make a div appear when scrolling past a certain point of a page) to make a div appear when the user scrolls down on the page.
The problem is: The div appears as soon as the page loads, and disappears when the user scrolls, and then reappears when they scroll > 700.
How do I get the div to not show up at the beginning of the page load?
Thanks!
<script>
// Get the headers position from the top of the page, plus its own height
var startY = 700;
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.scroll-up').slideDown();
}else{
$('.scroll-up').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
</script>

In your CSS set display:none property for the div you don't want to show on page load

Instead of slideUp() and slideDown()
you can use, fadeIn() and fadeOut() or slidetoggle();

Related

Jquery scroll function to apply whenever page is reloaded when scrolling had already taken place before the reload

I already know that I can use the jQuery scroll() method to apply a scrolled class to my navbar, which then allows me to do interesting things like change the background color of the navbar when the user scrolls down.
$(document).scroll(function () {
var $nav = $("nav.fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
This method fails however, when the user has already scrolled (and thereby applied the scrolled class), and then reloads the page. Immediately on reloading, there is no scroll class. It makes for some ugly looking UI.
How can I change this code such that whenever the page loads, it checks to see if the page is not at the top, and if it isn't, still applies the scrolled class? This way if the user scrolls to the middle and reloads the page, the browser is able to apply the scrolled class and therefore the appropriate css?
Examples:
Image before scrolling
Image of UI when scrolled class is added
Image of UI when reloaded after scrolled class has applied
On ready event you can check if user has scrolled
$(document).ready(() => {
$nav.toggleClass('scrolled', 0 < $(window).scrollTop());
});
While your page is loading (and you're scrolling), there's a great chance jQuery hasn't loaded yet, therefore the scroll event will not be triggered in your code.
You can get the number of pixels that the user has scrolled (after the page is loaded) using $("html").scrollTop(). If this is 0, it means you're at the top of the page.
$(document).scroll(function () {
let $nav = $("nav.fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
}).ready(function () {
let $nav = $("nav.fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
The .ready() event will be triggered once the page loads.

Issue with hiding text on page before it appears onScroll

Good evening,
I have a problem with hiding text on page when it loads, it should appear after I scroll down the page. But it's visible, when I reach the set point, it disappears and immediately appears again. And when I scroll to top again, then it finally disappears.
When I try to hide it with display: none; or visibility: hidden;, it doesn't even appear.
What should I change in the code?
Thanks for your help!
JS:
$(window).scroll(function() {
var pxFromBottom = 350;
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
$('.scroll-btn').fadeIn('slow')
} else {
$('.scroll-btn').fadeOut('slow');
}
});
CSS:
html { height:2000px; background-color: #666; }
HTML:
<div style="position:absolute; top: 120%;" class="scroll-btn"> my content to show </div>
The first time you are scrolling down its when your code first hides the div, it doesnt 'fadein' and then 'fadeout'.
Just fades out.
The fix this,
add to the div style
display:none;
this way you wont be able to see div when scorlling down.
But this thing only fixes one problem.
Your div is placed at 120% of the viewport height. So if the viewport height is 1080px, the div will have top 1296px.
But in your js code, you check
if $(window).scrolltop + $(window).height > $(document).height() - pxFromBottom)
So by the time the div get displayed you cant see it because it was already scrolled by.
But its still get the fadeIn, so when you scroll back up you can see it before its get fadeOut agian.
you should change your if stament to this:
if (($(window).scrollTop()) > ($(window).height() - pxFromBottom))
This way you check if the current scroll, is bigger the viewport height - pxFromBottom.
And once you scroll down you will the div fades in.
Fiddle - https://fiddle.jshell.net/jgthb6m2/5/
I'm not exactly sure what your issue is, but if the text needs to be hidden on load, perhaps do the following:
$( document ).ready(function() {
$('.scroll-btn').hide();
});
The problem with the calculation. The below code display the text, when the scroll top reaches the text. I assume that when you scroll to the text it should appears and when you scroll to the top again the text should disappears.
if ($(window).scrollTop() > $('.scroll-btn').position('top')) {
$('.scroll-btn').fadeIn('slow');
console.log('fade in');
} else {
$('.scroll-btn').fadeOut('slow');
console.log('fade out');
}

How to jump to certain position of scrolled element without scrolling the main screen?

I have a container (div) on the page. This container has a scrolling (provided by overflow:auto; height:400px).
I need no provide a URL, that will open a page so that the main page will not be scrolled, but the text in the container will be scrolled.
I tried www.mysite.com#position, but by this way the main page is scrolled too (and I need, that users will see the header on the top of the screen, and the "#position" position on the top of the container)
This is possible with javascript. And I will show a jQuery example here.
if (window.location.hash == '#position') {
$('#containerDiv').animate({
scrollTop: $("#actual_position").offset().top
}, 2000);
}
The actual_position should be the place where to scroll to. position should just be in the url and not on the page, to prevent the whole page from scrolling.
May you use the css-properties: position:fixed, top:..., left:... for your element that should stay at a certain place on your side, when an user scrolls.
Furthermore you can put all content that you do not want to be scrolled into a div and define the css-properties.
I hope this helps you a little bit.
Really it's an upgrading of Arjan answer (and now this really works).
As Arjan's suggestion the script will not work every time, but only by providing #scroll in the end of url (www.mysite.com#scroll). This script will scroll the container scroll bar to the #position element, and the all document will stay.
jQuery(window).load(function(){
container_top = jQuery('#container').offset().top;
element_top = jQuery('#position').offset().top;
element_relative_top = element_top -container_top;
if (window.location.hash == '#scroll') {
jQuery('#container').animate({
scrollTop: element_relative_top
}, 2000);
}
})

Fade out a div when scroller hits bottom of another div

This question sort of relates to this one: Append div to body when URL hash # changes
I'm using Curtain.js and currently I have a fixed div that pops up when the hash changes. I.E the div fades in when the user scrolls down the page to different panels. I don't want this div to be visible on the first panel.
The problem I now have is that when the visitor scrolls back up the page to the top the fixed div is still visible. I.e. appearing on top of the first panel. I would like to fade that div out as soon as it hits the bottom of that first panel. The other issue is that the panel's height adjusts to the height of the browser window (fluid/responsive layout) ruling out any fixed pixel JS solutions, which is what my code is based on:
// fade in/fade out banner titles
$(window).trigger('scroll');
var divs = $('.nav-wrap');
$(window).scroll(function(){
if($(window).scrollTop() < 550){
divs.fadeOut("slow");
} else {
divs.fadeIn("slow");
}
});
Anyone have any suggestions??
you can use window.height() which returns the height of the browser's viewport:
var vp = $(window).height(); // height of the browser's viewport
var divs = $('.nav-wrap');
$(window).scroll(function(){
if($(window).scrollTop() < vp){
divs.fadeOut("slow");
} else {
divs.fadeIn("slow");
}
});

Animate showing and hiding login box

I am trying to create a jquery animated loginbox.
I am a total javascript/jquery noob.
I have a div that contains the loginbox. That div is about 150px in height, and it is placed at the top of the page, so that only the bottom 15px of the div are visible when the page is loaded.
I am trying to slide down the div so that the rest of the login box is revealed on click, and make it slide back up when the bottom part of the div is clicked again.
Now, I am doing:
$('#showLogin').click(function(e){
$('#formContainer').animate({top: "+=135px"} , 1500)
e.preventDefault()
})
What this does is animate the slide down of the div. But how can I check if it has already been slided down so I can slide it back up?
Should I check for the position of the div and decide if it should move up or down, or is there a better way to do it?
The website is here
I think you are looking for .slideToggle(). An example: http://jsfiddle.net/FL4zZ/
Try this jsFiddle example. It animates a div with a form within it on click, and retracts it once it's fully extended.
The basic jQuery is:
$('div').click(function() {
var pos = $(this).css('top')
if (!$(this).is(':animated')) {
if (parseInt(pos, 10) == 0) {
$(this).animate({'top': '-35px'}); // anim up
}
else {
$(this).animate({'top': '0px'}); //anim down
}
}
});

Categories

Resources