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.
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.
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');
}
I am editing a site that has a sticky footer #sticky-footer-wrap this div has the CSS properties position: fixed; bottom: 0; so it hangs at the bottom of the page.
Once the user scrolls to the bottom of the page, the full size, expanded footer #exp-footer is displayed and #sticky-footer-wrap is hidden.
This is the JS I am currently using:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#sticky-footer-wrap').hide();
$('#exp-footer').show();
var scrollY = $('body').scrollTop()?$('body').scrollTop():$('html').scrollTop();
$('html, body').animate({
scrollTop: scrollY + $('#exp-footer').outerHeight()
}, 'medium');
}
});
Now I am stuck on how to properly reverse this, ie when the user scrolls back up 365px (the height of #exp-footer), I want #exp-footer to hide() or slideUp() and #sticky-footer-wrap to be displayed once more.
I have tried a few different ways, all of which are buggy - so I think I've been going about this the wrong way. My question is, what would be the best way to achieve this?
fiddle: http://jsfiddle.net/zqPVP/
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)
ok I have seen people using position:fixed to have a div follow the scroll.
I have also seen the following solution which is good ( Jquery follow scroll ) but I was wondering how I can accomplish 2 effects :
create a smooth scroll for the box
scroll the box inside a div (so if the scroll is higher than the holder div, the box should be on top of the div, and when you scroll down it should scroll inside)
an example of these features can be found here : http://www.limestonenetworks.com/dedicated_servers/order.html?id=47
but I cant figure out what they used and even if they used a library.
As a slight alternative to Adam Hutchinson's
http://jsfiddle.net/HelloJoe/JjuQu/
It's pretty self explanatory but just say if you need anything explained.
This div in the example is not polsition:fixed, or absolute. What they do is to animate the margint-top attribute on scroll relatively
Looks like you need to map an event to the document scrolling and then move a div relative to the scroll. Something along these lines may give you somewhere to start.
$(document).scroll(function(){
$('#divtomove').css('top', $(document).scrollTop());
})
Also, this is the code in the example page, just to get an idea
var $scrollingDiv = $("#customize");
$(window).scroll(function () {
if ($(window).scrollTop() > 490) {
if (($("#maincontentbox").height() - $(window).scrollTop()) > 0) {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() - 500) + "px"
}, "slow");
}
} else {
$scrollingDiv.stop().animate({
"marginTop": "0px"
}, "slow");
}
});
Simpler solution:
$('#divtomove').scrollFollow();