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');
}
Related
I am using jquery-smooth-scroll for controlling anchor scrolling. There is a feature/option to decide behaviour after scroll. I chose to hide the button after it gets to the bottom anchor. I then implemented some jquery to bring that button back when scroll was no longer 100% at the bottom of the page.
What I am struggling to do is make sure that the button always fades away when scroll is 100% down. The same way a standard back to top works but opposite ends of the page in my case.
Please see this fiddle I have put together https://jsfiddle.net/k253jvt8/
/* show and hide button*/
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) {
if (document.body.scrollTop == 0) {
$('.saveForm').fadeIn();
//below isnt working to fade away .saveform when scroll is 100% bottom
} else {
$('.saveForm').fadeOut();
}
});
The above is the code I use to bring back the button after it disappears, but then cant get it to disappear again when manually scroll to the bottom, it only disappears again when I use the button to get to the bottom - have a play with my fiddle and you will see what I mean.
In your fiddle, your wrapping <div class="reportFormPage"> is positioned absolute in relation to the document.
As a result your <body> element does not take it in to account when determining its height; hence it always has a height value of 0. Because of this your 'else' condition never occurs.
Removing the position: absolute; css rule resolves this issue.
Try this
if ($(window).scrollTop() ==0) {
$('.saveForm').fadeIn();
} else if($(window).scrollTop() < $(document).height()) {
$('.saveForm').fadeOut();
}
});
along with removing position:absolute as dommmm has said.
Here is the working fiddle https://jsfiddle.net/sd6sh4v6/2/
See if you like the change I brought to your smoothScroll by using no-js fallback.
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();
On my page, I have a div element containing copyright information.
I would like to
detect if the user has scrolled all the way to the bottom of the page.
if so, have the div slide down.
It would also be nice if there was a way that JQuery could tell if I am near the box without having to scroll over it to display the copy right as well.
Thanks, DoubleDogg6
It's simple to detect this.
take a look at this jfiddle:
Detect scrolling to the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
2.
For sliding down a div read the documentation for .slideDown()
jQuery .slideDown()
If you want jQuery, then this should suffice
$(window).scroll(function(){
if ($(window).scrollTop()+$(window).height() == $(document).height()){
// and now, slideDown
$("#your-div-id").animate({
height: /* whatever your final height should be */
}, 200);
} else if ($(window).scrollTop()+$(window).height() < $(document).height() + 50) {
$("#your-div-id").animate({
height: /* whatever your original height was */
}, 200);
}
});
Of course, you combine the animate function with others to maybe fade in the text or something, and change the speed at which the animation happens, currently 200ms.
You also want your div's overflow-y set to hidden,
#your-div-id {
overflow-y: hidden;
}
Check out this JSFiddle demo.
Hi i try to display a div when i scroll to bottom of my page and hide it when its not on the bottom.
The alert message work when at the bottom page but setting css visible or trying with fadeIn or out not work. I need little help to see what i did wrong.
Also on IE 9 the div "#loadSection" its hidden but i still able to put my cursor on it and click when other browser work correctly.
here my code.
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() > $(document).height()){
$("#loadSection").fadeTo(0,0).css('visibility','visible');
alert("bottom");
}else{
$("#loadSection").fadeTo(0,0).css('visibility','hidden');
}
});
The problem is that the fadeIn/Out happens with every bit of scroll and it's causing the div to flash. Here's a CSS animated option:
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() >= $(document).height()){
$("#loadSection").addClass('visible');
}else{
$("#loadSection").removeClass('visible');
}
});
DEMO:
http://jsfiddle.net/Eh53d/
The visibility property allows an element to remain on the page and take up space. To solve your issue in IE where you're still able to mouse over it, use the display property instead.
To your main issue, try the following:
var loadsection = $("#loadSection");
if ($(window).scrollTop() >= $(document).height() - $(window).height()){
if ( loadsection.is(':hidden') ) loadsection.fadeIn();
}else{
if ( loadsection.is(':visible') ) loadsection.fadeOut();
}
fadeIn and fadeOut will utilize the display property, which will completely remove the element when it's not visible. Also, you're fading to zero opacity in both of your fadeTo calls, so even if though visibility is being set, the element is still completely transparent.
I am hoping someone can kindly help. I'm by no means a programmer, and I'm trying to learn how to create a slightly different sticky div than normal. This is what I want to achieve:
when the div #projectwrapper scrolls up the screen, and is 150px from the top of the window, it should stick and stay there while the rest of the page scrolls
when scrolling back down the page, the div should return to its normal place in the page when that comes into view.
I have been trying the demos and examples, and I can nearly get it working. But it will only get activated when it goes to the very top of the window, and it stick at the very top. However I need the activation and sticking to happen 150px from the top.
This is what I have so far.
$(document).ready(function() {
$('#projectwrapper').waypoint(function(event, direction) {
}, {
offset: 150
}).find('#projectdescription').waypoint(function(event, direction){
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
I haven't used waypoint. You can do using some simple jQuery:
var projectWrapperPosition = $('#projectwrapper').position().top; //div position
$(window).scroll(function() { //when window scrolls
if($(window).scrollTop() > (projectWrapperPosition - 150)) //check if position of the window is 150px or smaller than the position of specified div has
$('#projectwrapper').addClass('change-position'); //.change-position position fixed the div
else
$('#projectwrapper').removeClass('change-position');
});
css:
.change-position {
top:150px;
position:fixed;
width:100%;
background:red;
}
Check demo: http://jsbin.com/uxizab/2/ (scroll to see the effect)